Web动画API教程: 总结
这是介绍浏览器中web动画API的系列教程的总结篇。如果你有什么问题/想法，或者发现我理解错了规范的内容，或是希望我在接下来的文章中对某部分内容进行探讨的话，请在Twitter给我留言吧~@dancwilson。
我们前面已经讲解了很多内容，而且希望能够解决Web动画API到底是什么的问题。在总结这个系列时，我们将回顾一下我们已经讨论的内容，然后再看一下有哪些内容还没有实现的。
为什么这么费心API呢？
在第一篇的导论中就已经讨论了API是如何应运而生，为了将CSS、JS、SVG创建动画的方法糅合到一起，提取它们的优点，提供一种统一的方法。这意味着，例如，JavaScript可以拥有CSS已有多年的硬件加速的优点，而且你也不需要纠结于CSS的声明。这个API不是要取代像GSAP这样的库，只是在浏览器层面提供更多选择。
Firefox和Chrome已经都开始在实现，Edge也将它放到了待办事项中。polyfill允许我们现在就将它作为定型的规范来使用它。
动画基础
创建基本动画，使用的是和CSS类似的结构，通过提供关键帧和时间函数来实现。
var player = document.getElementById('toAnimate').animate([
{ transform: 'scale(1)', opacity: 1, offset: 0 },
{ transform: 'scale(.6)', opacity: .6, offset: 1 }
], {
duration: 700,
});
时间轴控制这一块，很明显目前在CSS中并不存在。通过playState属性读取动画的状态，通过如play()、pause()、和finish()这样的方法来改变动画的状态。我们还可以通过读/写playbackRate属性来改变播放速度，变快变慢都可以。currentTime可以也可以读/写，我们还可以通过onfinish在动画结束时设置一个回调。
多动画和分组
Web动画API允许在一个元素上添加多个动画，分别创建单独的动画player。document上的默认时间轴可以让我们通过getAnimations()方法获取所有动画。动画可以使用GroupEffects分组然后一起播放，或者使用SequenceEffects一个接一个播放，在Part 4中已讲解（polyfill中有提供，但第一版规范中没有）。
运动路径以及将来的发展
沿路径动画，在这个系列教程中，讲解过CSS中可以看到它初始实现的效果，但是还有很多内容没有实现。
关键帧间距
目前的实现方案是使用默认间距，如果没有在关键帧中设置offset，也就意味着它们是均匀分布的（例如，三个帧的情况就是0、.5、1的偏移）。规范还定义了一种基于属性一步一步推进的动画，这样它就有了不断改变的速度。规范中Spacing Keyframes这一块做了详细的讲解。
Promises
规范已经发展到引入一个ready Promise，而且这个Promise每次在动画取消或进入pending状态（通常是切换成“running”或“pause”状态之前发生）时都会被新的取代。另外，这个系列中我们也讨论了不使用onfinish回调，我们将使用finished Promise来在一个动画结束之后跑一个函数。
我们接下来会继续讨论Web动画API
大家已经开始渐渐地来讨论这个API，我希望热度能够持续。规范的内容、浏览器实现、以及polyfill都已经出现了有一段时间了，它们也已经准备好接受大家的审查了。
有时候CSS是非常棒的，有时候requestAnimationFrame也不错，有时候使用库是最好的解决方案。关键在于弄清楚什么时候使用哪个，这个API提供了相当多之前没有提供的东西，所以大家好好玩吧~
本文根据@Dancwilson的《Web Animations API Tutorial Conclusion》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://danielcwilson.com/blog/2015/09/animations-conclusion/。
彦子
如需转载，烦请注明出处：https://www.fedev.cn/css3/web-animations-api-tutorial-animations-conclusion.htmlNike 2019 Air Vapormax Flair Running Shoes Purple Yellow