Web动画API教程: 总结

这是介绍浏览器中web动画API的系列教程的总结篇。如果你有什么问题/想法,或者发现我理解错了规范的内容,或是希望我在接下来的文章中对某部分内容进行探讨的话,请在Twitter给我留言吧~@dancwilson

我们前面已经讲解了很多内容,而且希望能够解决Web动画API到底是什么的问题。在总结这个系列时,我们将回顾一下我们已经讨论的内容,然后再看一下有哪些内容还没有实现的。

为什么这么费心API呢?

第一篇的导论中就已经讨论了API是如何应运而生,为了将CSS、JS、SVG创建动画的方法糅合到一起,提取它们的优点,提供一种统一的方法。这意味着,例如,JavaScript可以拥有CSS已有多年的硬件加速的优点,而且你也不需要纠结于CSS的声明。这个API不是要取代像GSAP这样的库,只是在浏览器层面提供更多选择。

FirefoxChrome已经都开始在实现,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.51的偏移)。规范还定义了一种基于属性一步一步推进的动画,这样它就有了不断改变的速度。规范中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/

彦子

在校学生,本科计算机专业。逗比一枚,热爱前端热爱生活,喜欢CSS喜欢JavaScript喜欢SVG,爱玩PS玩AI玩啊逗比的软件。努力向上,厚积薄发。

如需转载,烦请注明出处:http://www.w3cplus.com/css3/web-animations-api-tutorial-animations-conclusion.html

返回顶部