JS原生自带的animate方法
很多人认为，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: },
{// 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 的参数，表示颜色的值属于字节型，所以要用引号。
原来JS也可以做动画的{:4_204:} 红影 发表于 2022-7-21 20:12
原来JS也可以做动画的
IE不支持，以前是IE当道，所以大家都不去用，就有了误会，以为JS不支持动画，需要额外封装 马黑黑 发表于 2022-7-21 20:41
IE不支持，以前是IE当道，所以大家都不去用，就有了误会，以为JS不支持动画，需要额外封装
原来还有这样的历史啊，黑黑知道的真多{:4_204:} 红影 发表于 2022-7-22 19:40
原来还有这样的历史啊，黑黑知道的真多
做网站都知道的 马黑黑 发表于 2022-7-22 20:07
做网站都知道的
我们这样不做的，肯定不知道呢{:4_173:} 红影 发表于 2022-7-22 20:58
我们这样不做的，肯定不知道呢
其实做论坛也是做网站，只是各人研究方向不同。很多人人，做论坛时会考虑浏览器的问题。 马黑黑 发表于 2022-7-22 20:59
其实做论坛也是做网站，只是各人研究方向不同。很多人人，做论坛时会考虑浏览器的问题。
我们几个都只是闲玩了，没研究过{:4_173:} 红影 发表于 2022-7-23 22:04
我们几个都只是闲玩了，没研究过
其实也行 马黑黑 发表于 2022-7-23 22:05
其实也行
嗯嗯，自在地安才更有玩的动力{:4_173:} 红影 发表于 2022-7-24 14:00
嗯嗯，自在地安才更有玩的动力
就酱紫的 马黑黑 发表于 2022-7-24 15:48
就酱紫的
那就继续自在着了。 红影 发表于 2022-7-24 21:07
那就继续自在着了。
挺好的
页:
[1]