很多人不认识 JS 原生动画函数，百度的AI也认为没有。其实不然，JS早就拥有 Web Animation API，提供两个接口，其中 animate 函数就是用来操控动画的。本文将通过制作一个可控的元素旋转对象初识 Web Animation API，具体做法是，使用 JS 原生 animate 函数驱动一个 img 元素，令其旋转并且可以对其进行播放暂停进行控制。
我们需要准备一下图片：
这张图片在后面的示例中需要一个 id ，id="h7"，它是图片的标识，是我们后续操作这张图片的依据。animate 函数可以这样调用：h7.animate(/* 参数 */);。现在要做的事情是了解 animate 函数的参数——其实就是 animate 函数的语法：
element.animate(keyframes, options);
element 是要执行 animate 动画的元素，一般使用 id 标识，比如本文的图片标签 id h7，或通过 document.querySelector 等方法抓取到的元素标识。下面讨论重点问题，即两个参数：
keyframes 参数，顾名思义指关键帧动画，它是关键帧动画描述的对象集合，比如从 0 到 360deg 的旋转描述，用 JS 对象来表示：
{
transform: 'rotate(0)', /* 第一帧 */
transform: 'rotate(360deg)', /* 第二帧 */
}
CSS关键帧集合描述放在花括号 {} 内，这是JS对象的表示方法。这个内容块描述了动画的两个帧，起始帧旋转 0 度，结尾帧旋转 360 度，向 animate(参数1, 参数2) 函数传递参数1，告诉它给我运行一个动画，从 0 到 360deg 旋转元素。这个内容快就是 animate 函数所需的第一个参数，我们直接将其放置在 keyframes 参数的位置即可，当然，为了方便，我们还可以将动画描述集合储存为一个变量，后面的示例代码会呈现这一点。
options 参数是动画属性集合，包含但不限于动画运行周期、动画运行次数，也是使用 JS 对象存储：
{
duration: 8000, /* 动画持续时长，毫秒单位 */
iteration: 2, /* 动画运行次数，正整数，Infinity 为无限 */
}
同样地，将以上代码块放置到 animate(参数1，参数2) 参数2的位置，告诉 animate 函数，动画的运行属性值是这两个：8 秒钟一个运行周期、运行两次。
把这些代码整合一下，动画就可以运行了：
<img id="h7" alt="" width="200" src="https://638183.freep.cn/638183/web/svg/sunfl-2.svg" />
<script>
h7.animate(
{
transform: 'rotate(0)', /* 第一帧 */
transform: 'rotate(360deg)', /* 第二帧 */
},
{
duration: 8000, /* 动画持续时长，毫秒单位 */
iteration: 2, /* 动画运行次数，正整数，Infinity 为无限 */
}
);
</script>
图片旋转两圈后自动停下来，不过这个停止动作不是我们控制的，是 iteration: 2 属性的限定。要控制 animate 函数的动画，我们需要拿到动画操作标识，然后通过这个标识控制动画。animate 函数和CSS关键帧动画一样，拥有动画的播放与暂停方法，详情请参阅本文演示示例的代码：
<img id="h7" alt="" width="200" src="https://638183.freep.cn/638183/web/svg/sunfl-2.svg" />
<script>
//rot对象 ：旋转动画描述（省略首帧）
const rot = {
transform: 'rotate(360deg)',
};
// rotAttr对象 ：动画属性值列表
const rotAttr = {
duration: 8000,
iterations: Infinity,
};
// 运行并获得动画操作入口 rotate
const rotate = h7.animate(rot, rotAttr);
//图片单击事件
h7.onclick = () => {
rotate.playState === 'running' ? rotate.pause() : rotate.play();
};
</script>
playState 是动画的运行状态，主要是 running 和 paused 两种；同时，animate 动画拥有 play() 和 pause() 两种方法。以上代码，我们就是根据 playerState 状态调用不同的方法来实现对 animate 动画的控制。效果如下：
（点击图片可以控制动画）
小结：animate 是 JS 原生的动画函数，它源自 Web Animation API 接口，它需要两个参数，参数1是动画各帧的描述集合，用以描述动画的全程，参数2是动画属性值的描述集合，用以描述动画的运行周期（时长）、运行次数等，两个参数都是用 JS 对象表示，分别放置在在花括号内；animate 函数的动画与动画属性值的描述语法大致和CSS关键帧动画一样，但有自己的语法规范。animate 函数应由元素调用，元素标识.animate(参数1, 参数2);。而要控制动画，需要获得动画标识，动画标识 = 元素标识.animate();，然后可以使用 动画标识.play(); 播放动画、使用 动画标识.pause(); 暂停动画。动画的运行状态则通过 动画标识.playState 获得，状态一般是 running 或 paused（还有中间状态，这里不提）。
发表于 2024-5-27 20:37
没看懂也支持一下。。
