WAAPI属性

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

上一篇文章中我们快速的了解了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)

打印出来的结果如下图所示:

WAAPI属性

console.log(player.effect);

WAAPI属性

console.log(player.effect.timing);

WAAPI属性

掌握了其中的方法、属性等使用,将会发现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:获取或设置一个动画开始播放的
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/animation/waapi-properties-intro.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部