WAAPI属性

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

打印出来的结果如下图所示： 掌握了其中的方法、属性等使用，将会发现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 :获取或设置一个动画开始播放的时间 Animation.timeline :获取或设置动画的 timeline Animation.finished : 仅读属性 ，返回当前动画的Finish Promise Animation.playState : 仅读属性 ，返回动画播放状态的枚举(enumerated)值 Animation.ready : 仅读属性 ，返回这个动画当前的Ready Promise 接下来简单看看这些属性

Animation.currentTime Animation.currentTime 可以获取和重置动画 pause() 和 play() 的时间

可以在动画停止和播放时获取到其对应的 Animation.currentTime : 点击 Pause 和 Play 按钮可以在控制器里输出其对应的 player.currentTime 时间： 除了可以获取 .currentTime 的值之外，还可以设置其值： player.currentTime = player.effect.getComputedTiming().delay + player.effect.getComputedTiming().activeDuration / 2; 每次点击 Play 按钮， player.currentTime 的值都是一样： currentTime 返回当前动画的所在的毫秒数

最大值为 delay + (duration * iterations) ，当然，无限迭代的情况则没有最大值

动画的播放速率会影响时间轴进行的速度

如果你设置的播放率为 10 ，你的最大的 currentTime 保持不变，但是你会比时间轴快 10 倍

这个概念在早期的倒计时例子中也出现过

因为 currentTime 是读/写属性，我们也可以使用它来跳转到时间轴上的某个点

Animation.effect Animation.effect 可以获取和重置动画 effect

如上面的示例： 也可以设置 effect ： Animation.id Animation.id 是用来设置或者获取动画的 id 名，其非常类似于CSS Animation中 @keyframes 的后的动画名称

就前面的示例来说： player.id; 其打印出来的值是 anime

那是因为我们在 animeOptions 中设置了 id 值为 anime

其实也可以重新设置它的值： player.id = “traslateAnimation” 打印出来就成 traslateAnimation

Animation.playbackRate Animation.playbackRate 获取或设置一个动画的播放速度

动画提供了一个比例因子，将会改变动画 timeline 和 currentTime 的变化比率

其初始值为 1

另外，当 playbackRate 的值越大，速度越快；反之速度越缓存

修改了 playbackRate 值后的动效. playbackRate 的值可以是 0 ，也可以是正值或者负值

如果是负值将会扭转动画

Animation.startTime Animation.startTime 返回或设置动画回放的开始时间

来简单的看一个示例： 上面显示的效果是根据 @Rachel Nabors 写的 Cats animated with the Web Animation API 效果改造的

Animation.timeline Animation.timeline 用来获取和设置动画的 timeline

player.timeline = document.timeline; Animation.playState Animation.playState 是一个只读属性，会返回动画的状态

返回的值有五个 idle 、 pending 、 running 、 paused 和 finished ： 来看一个示例： Animation.finished Animation.finished 是一个仅读属性，允许你返回动画完成状态

比如下面的代码，其一直在等待，真到所有动画完成并且删除可动元素为止： Animation.ready Animation.ready 将返回动画当前的Ready Promise对象

Animation.finished 和 Animation.ready 都涉及到了Promise

如果您对Promise方面没有任何了解，建议阅读@Dr. Axel Rauschmayer的《 “Asynchronous programming (background)” 》或者@Nicolás Bevacqua的《 “ES6 Promises in Depth” 》，另外@Dan Wilson的《 Promises in Web Animations 》对我们了解WAAPI中的涉及到Promise方面的有很大的帮助

有关于Promises更多的教程，可以阅读下面的相关文章： Promise API 简介 JavaScript Promise迷你书 学习 JavaScript Promises 的最佳资源 Promises: 所有的错误使用方式 | getiblog JavaScript Promises JavaScript Promises Promises 和异步编程 深入理解 Promise 五部曲 总结 这篇文章简单的介绍了Web Animation API中一些属性以及其使用方法

通过这些属性可能帮助我们更好的对动画进行操作，也从文章的示例可以看到其特性以及优势

如果和CSS Animation相比，我想你也能体会出他们之间的差距了

如果你对这些属性了解透彻的话，你将能做出更优秀的动效
如果您有这方面的经验，欢迎在下面的评论中与我们分享
特别希望大家帮我指出文章不对之处

文章涉及到图片和代码，如果展示不全给您带来不好的阅读体验，欢迎点击文章底部的 阅读全文

如果您觉得小站的内容对您的工作或学习有所帮助，欢迎关注此公众号

W3cplus.com ———————————— 记述前端那些事,引领web前沿 长按二维码，关注W3cplus ▼

欢迎投稿 职场/创业方向. 邮箱wangfzcom(AT)163.com：王夫子社区 » WAAPI属性

标签：