Web动画API教程: 总结

标签：

转载自http://www.w3cplus.com/css3/web-animations-api-tutorial-animations-conclusion.html

我们前面已经讲解了很多内容，而且希望能够解决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提供了相当多之前没有提供的东西，所以大家好好玩吧~

Web动画API教程: 总结

标签：

原文地址：http://www.cnblogs.com/chern2468/p/5497745.html