特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
从上一篇文章中我们快速的了解了Web Animation API能做什么,也能使用Web Animation API制作类似CSS3 Animation实现的动效。但到目前为止,也仅仅就如此,并没有看到Web Animation API比CSS Animation有任何优势之处。那在这篇文章中,咱们来看看Web Animation API和CSS Animation明显性的区别。
当你调用element.animate()
,会返回一个AnimationPlayer
对象,然后动画开始播放。比如下面这样的一个示例:
假设将上面的动画赋值给一个变量player
,我们就可以返回动画的方法(methods)、属性(Poperties)和Promises。
var player = eleAnime.animate(animeKeyframes, animeOptions);
console.log(player)
打印出来的结果如下图所示:
console.log(player.effect);
console.log(player.effect.timing);
掌握了其中的方法、属性等使用,将会发现Web Animation API的强大之处,也能更好的理解Web Animation API比CSS Animation有跟更强大的优势。接下来,一起来看看其方法和属性。
WAAPI属性
WAAPI对应的属性主要有:
- Animation.currentTime: 动画播放(runing)或者停止(paused)的当前时间。如果动画没有
timeline
,动画会停置或者不会播放。它的值是null
- Animation.effect: 获取或设置动画的
KeyframeEffect
- Animation.id: 获取或设置字符串,用来识别动画,有点类似于
@keyframes animationName
中的animationName
- Animation.playbackRate:获取或设置动画的播放速度
- Animation.startTime:获取或设置一个动画开始播放的
如需转载,烦请注明出处:https://www.w3cplus.com/animation/waapi-properties-intro.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!