JS原生自带的animate方法

马黑黑 · 发表于 2022-7-21 19:55

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

很多人认为，animate方法是jQuery封装出来的。这是误会，虽然jQuery的确封装有完美的animate方法。

animate是JS原生自带的一个方法，它实际上和CSS的 @keyframes + animation 一样，都是基于 animate API 封装的。JS 的 animate 方法有两个参数：

obj.animate(@keyframes, option);

obj指元素，需要调用 animate 方法的元素；animate 就是方法，括号里是两个 animate 所需参数，其中：

@keyframes 指动画属性设置，一般以JS对象出现，例如设置透明度变化，

obj.animate(
   { opacity: [1, 0.5]},
      {// options here},
);

红色部分的代码，等同于CSS中的——

@keyframes { from { opacity: 1; } to { opacity: 0.5; } }

红色代码也可以反过来用数组套对象的方法：

[ { opacity: 1 }, {opacity: 0.5 } ],

这看上去更接近 CSS 的 from 。。。 to 。。。的结构。

option 参数是关于动画的参数设置，比如运行时长、执行次数、运动曲率等等，都一一对应与 CSS 的 animation 属性名称，请在下面的实例代码中体会常用的几个 option 参数。

一个 animate 实例的代码，div 在两种颜色间变换背景色：

<style>
#papa {
margin: auto;
width: 100px;
height: 100px;
border: 1px solid;
}
</style>

<div id="papa"></div>

<script>
papa.animate(
{
background: [, //从浅绿到浅蓝变化
},
{
duration: 3000, // 运动时长
iterations: Infinity,  // 执行次数：循环
direction: 'alternate', // 方向：反向运行动画（不要本句或设其他值就不反向）
},
);
</script>

注意一下红紫色属性值，头两个是数值型，所以不要引号，后一个是字节型，或称字符串值，要有引号。同样的，第一个 animate 的参数，表示颜色的值属于字节型，所以要用引号。