现代 CSS

我们来谈谈Web动画API:简介

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

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

大概一年之前,Google在Polymer上宣布了Material Design的存在,并且表示将使用polyfill作为即将到来的统一Web动画API标准。

我没有听说过这个API,但是我非常好奇,特别是它提到的MotionPath(运动路径)效果。目前尚未实现(你可以在这系列教程的Part 5中找到相关内容),但是它的目标是提供一种统一CSS、JS和SVG的方法来实现动画,这让我非常感兴趣。一年之后Chrome和Firefox已经开始实现这块内容,polyfill的进展非常平稳,所以是时候来认真研究一下它了。

但是现在很少人会讨论WAAPI了。我希望能够通过一系列文章来强调现在浏览器原生提供支持的功能(包括polyfill),探索为什么我们需要这个API,并找出它的厉害之处。我们也希望能够有越来越多的人参与讨论,并一起为这个API的实现而努力。

什么是统一web动画API?

我们在开始这次探索之前,先弄清楚它是什么,以及它到底能实现什么。

动画在过去的五年里发展得很好,因为强大的CSS支持以及JavaScript新增内容的提升。但是每一种实现动画的方法,都有其缺点和优点。

  • CSS动画因为有硬件加速,所以过渡平滑,而且CSS动画的支持内置在浏览器中,但是规则是在CSS中声明的,需要通过JavaScript来实现值的动态变化。
  • requestAnimationFrame有良好的支持,并在动画中允许浏览器优化,但是它会被中断——如果有很多其它的javascript在跑的时候。而且,它往往还需要数学计算来获取倒计时。
  • setInterval是很多开发人员进入动画世界的大门,但是它并不精确,而且可能导致结结巴巴的动画效果。
  • jQuery.animate()也让一些其它的开发者进入了动画大世界,但是经常会有性能问题。
  • 库的话如VelocityGreenSock (GSAP)完善了JavaScript性能,而且经过测试,在很多情况下是最好的选择。但是,它们还是需要维护和加载外部库。

总的来说,只要浏览器的支持尽可能的给力,而且还可以优化的话,我们就喜欢。浏览器现在有document.querySelector,因为我们看到了jQuery提供的选择DOM元素的值。所以库现在已经进入到原生浏览器中了。理想情况下,我们可以在浏览器级别打包尽可能多的动画控件放进去。这些库可以专注于提供新特性,还会自动更新。

统一Web动画API就是在试图做到这一点。它的目标是既有CSS的性能优势,又有JavaScript的优点和灵活性(还有SVG动画,我们会在后面的文章中进行讨论),然后把它赋给浏览器,使其工作得更好。

让我们加点新内容解决这个问题吧!

在以前的工作中,我们曾收到一封邮件,表示他们知道我们有很多地方可以检查公司通告——邮箱、办公室的监控器、Yammer、Google Chat以及内部网/wiki。所以为了解决他们提到的问题,他们建立了一个博客。

我在第一次听说统一Web动画API的时候也是同样的想法,我听说我的公司建立了博客——这只会让事情变得更糟糕。结果确实,博客并没有收集到任何有用的东西,它只是增加了一个我们检查消息的地方,它最终还是灭亡了。

不过这次感觉并不一样。重复查看规范(我第一次认真到了这个程度)说明我已经把注意力放在这上边了。它并不是说要取代现有的行为(尽管有些浏览器似乎一直不开心),而是要团结各种方式,甚至让它们进行互动。语法和CSS相似,但是增加了变量、控件和结束回调的选项。

接下来

统一web动画API还是新内容,并开始在实现中(目前在ChromeFirefox中),除了拥有polyfill之外。下次我们就会真正开始看看它给开发者们提供了什么内容,包括一些具体的实例~

本文根据@Dancwilson的《我们来谈谈Web动画API:简介》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://danielcwilson.com/blog/2015/07/animations-intro/

彦子

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

如需转载,烦请注明出处:http://www.w3cplus.com/css3/animations-intro.htmlAir Max 90 LTHR Suede

返回顶部