Home » Code » [译文]谈谈网页动画API(Web Animation API)

[译文]谈谈网页动画API(Web Animation API)

原文来自:http://danielcwilson.com/blog/2015/07/animations-intro/
翻译:xiaomiao

本文是对浏览器上即将到来的网页动画API系列教程的一个介绍。如果你有自己的想法或问题,或是认为我曲解了其中的细节,再或是想看到更多我未来文章的特别讨论,请在Twitter上联系我(@dancwilson)

大概一年前谷歌宣布了Material design,通过Polymer实现网络表现,算是为即将到来的网页动画API标准提供了一个兼容库。

我并没有听说这些API,但是很好奇,尤其是当它谈论运动路径效果时。实际上它们并没有实现(严重剧透,真的没有),但是它们尝试提供一个种方法来混合CSS,JS,SVG从而实现动画的目标成功吸引了我的注意。一年之后Chrome和Firefox都已经开始实现,兼容库也已经稳定,是时候认真看一下了。

但真的很少有人去谈论WAAPI!我现在打算开始写个一系列的文章来突出浏览器的这些功能(这里有一个兼容库),探索我们为什么需要这些API,以及理解它们之间的细微差别。希望能有更多人进来讨论,一起探讨完善这些API。

什么是网页动画API

我们的探讨从理解这是什么以及它想实现什么开始。

近五年来,由于CSS的强力支持,以及Javascript的不断改进,动画已经发展得比较完善了。但实现动画的每一种方法依然有大量的缺点。

  • CSS有硬件加速实现平滑过度,并且它的支持是内建在浏览器中的。但它的规则是在CSS中声明,且需要通过Javascript去获取它动态改变后的值。
  • requestAnimationFrame也有着良好的支持度,动画时也允许浏览器进行最大程度的优化,但它仍然有可能挂掉,尤其是在有很多其他Javascript代码运行时。它同样需要很多的数学计算才能稳定下来。
  • setInterval被很多开发人员拿来做动画,但它是不精确的,也容易出现卡顿。
  • jQuery.animate()同样被更多的开发人员拿来做动画,但它经常有性能问题。
  • 其他一些库比如VelocityGreenSock(GSAP)改善了Javascript的性能,在很多情况下的测试也表明它们确实达到了最佳状态。然而,它们仍处于维护更新阶段,而且需要引入额外的库也是不可忽略的问题。

一般来说,我们希望浏览器能支持得更多,并接管优化工作。我们看到了jQuery提供的强大的选择DOM元素功能的价值,因而现在浏览器有了document.querySelector。慢慢地,很多公共库的功能都已经转移到原生浏览器中了。同样的,理想状态下,我们希望把尽量多的动画控制包装到浏览器级别。然后这些库就可以将焦点转向其他的新功能,并且形成一个这样的循环。

网页动画API就试图做着这些工作,它致力为动画带来CSS的性能、Javascript的灵活(以及SVG动画,这个我后边的文章会讲),并将之集成到浏览器中让它工作得更好。

让我们添加一些新东西来解决这个问题

在之前的工作中,我们接收了一封邮件,说他们知道我们有很多地方可以查看到公司公告——电子邮件,办公室里的监视器,Yammer,Google Chat,企业内部网络或者维基。为了解决这个问题,他们正在搭建一个博客。

当我听到网页动画API时,我的想法跟我听到公司正在搭建博客时是一样的——这只会让事情变得更糟。很明显,博客并不能把任何东西都集中起来,它只是为我们增加了一个必须的查看消息的去处,然而这种方式已经逐渐消失了。

然而,这次并不一样,回顾这个规范(我第一次做到了如此广范围的适配)可以看到我在上边的努力。它并不是要替代现有的做法(尽管一些浏览器看起来对它们也不以为然),而是去凝聚各种各样的方法,甚至互相促进。它的语法跟CSS很像,又添加了许多变量、控制、以及回调的选项。

接下来

所以,网页动画API是全新的,除了一些兼容性即将被实现了(当下的ChromeFirefox(需要将开关打开))。下一篇我们真正的来看一下它为开发者带来了什么…实例说明!

查看这个系列剩下的文章:

  • Part 1:创建基本的动画
  •  Part 2:动画播放与时间控制
  • Part 3:多个动画
  • Part 4:分组效果和序列效果
  • Part 5:运动路径
  • 总结

【本文完】

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Time limit is exhausted. Please reload CAPTCHA.