这里的复合动画指动画的混合运行，每一帧执行两个或以上的动画，比如元素在旋转的同时还变换色相。这在CSS关键帧动画中非常简单，在动画帧描述中用分号隔开不同的动画描述即可。而在JS原生animate动画中实现复合动画，我们需要在 keyframes 参数即动画参数上做文章：keyframes 参数是动画各帧的描述对象，它可以是数组形式的对象集合，试看如下代码：

以上，我们定义了一个名为 ani 的动画数组，数组的子项是两个对象，每一个对象都有两个键值对，健名分别是 transform 和 filter，分别用以描述转换动画和滤镜动画。首尾帧规定了旋转动画从 0 到 360 度、色相从 0 到 240 度进行旋转、变色。如果需要，每一帧还可以添加别的动画，都是用键值对的方式表达，两个键值对之间用小角逗号隔开即可，最末一个键值对后面有没有逗号都可以，从美观的角度考虑应该不要。

我们给animate函数加上 options 参数，动画就可以立马运行。下面的代码，在《初识JS原生animate动画函数》的基础上略作改动，图片除了旋转还改变色相，动画可控，可以将代码复制到pencil code运行以查看效果：

复合动画的关键是animate函数参数1 keyframes 的表达，其方式是用数组来组织各帧动画，每一帧的动画用JS对象来表示，对象里头每一个键值对描述一种动画在该帧的状态，两个键值对间用小角逗号隔开。

缓动动画则是高级动画绕不开的技术话题。所谓缓动就是缓冲，指的是运动的物体由于受到阻力或加速度的影响，在运动过程中速度不断衰减或不断提升。加速的动画称为缓入动画，减速的动画叫做缓出动画。本文示例演示缓出动画，旋转的图片持续减速，以至最终停下——不过由于使用了 Infinity 动画属性，理论上旋转的图片是永远停不下来的，感兴趣的朋友请查阅芝诺悖论。

animate动画对象有一个 playbackRate 属性，可读写，用于返回或设置动画的播放速率。我们可以借助定时器 setInterval 在设定时间范围内持续改变其值，例如乘以0.9，动画的播放速率就会不断地慢下来。假设我们的上述动画是环保而高端的9块9包邮的可充电设备，现在我们给它加入耗电机制，电力的减退导致它的运行速度不断减缓，直到我们给它充满电再让它满血回归：

电量  

1

以下是上述示例的完整代码：

重点在 setInterval 定时器，它每隔 1000 毫秒令 h7Ani 动画的播放速率变为上一秒速率的 90%，从而达到动画速率持续下降也就是缓动的目的，代码在第 23 行。定时器还顺带改变充电按钮的文本，并实时显示当前电量。关于电量的计算，为了避免科学计数的出现影响按钮操作，我们以四舍五入的方法只取浮点数小数点后两位数，所以电量最终会变为 0，符合现实生活规律，芝诺悖论也因此不攻自破。

充电按钮的点击事件，负责给电器充电，但只有在电量不足 5% 时才能充电。这是标准的超级快充，点击一下就能充满电，处于充电行业全宇宙遥遥领先的地位。