Web动画：学习使用API

发布于彦子

8 年前

感谢Rachel Nabors，第一个告诉我关于API的人；还有Dan Wilson，提供了他关于WAAPI的文章，让我进入学习。

如果你使用过SVG，你应该知道可以使用SMIL给SVG添加动画。CSS Transitions和keyframes动画都可以操作CSS属性来添加动画。 requestAnimationFrame() 使得浏览器可以在下一帧执行之前，请求一个动作。

但是每一中动画技术都不是完美的，各自有各自的问题。

现代浏览器正在逐步淘汰SMIL。Chrome也长时间多次表示要抛弃SMIL，而且既然Blink要改，Opera同理；IE11和Edge则从来都没有实现这块，我还没在Firefox中查找关于SMIL的支持情况。有一个SMIL Polyfill——Fake SMILE，但是它对于开发者期望它执行以及用在实际生产中是否合理？

关于SMIL详解，可以移步张鑫旭老师的博客文章 (づ￣ 3￣)づ。

Transitions和animations一直都处在需要添加前缀的麻烦中。

浏览器厂商有时会在实验或非标准的CSS属性中添加前缀，所以开发者可以进行试验，但在标准进程中浏览器行为的改变并不会破坏代码。开发者应该等到引入无前缀的属性，直到浏览器行为标准化。前缀(-webkit-，-moz-，-o-，-ms-)参考 https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix。

供应商前缀的问题是，为了支持尽可能更广泛的用户，它们很少会被抛弃。理论上当一项技术完全标准化的时候，浏览器厂商应该（或者说，必须）抛弃前缀，但是它们只针对当前版本做这样的支持，旧版本还是需要继续在代码中添加前缀。

所以，在定义CSS动画时，我们就必须像下面这样，添加不同的浏览器前缀以获得全面的支持：

@-moz-keyframes identifier {
  /* For Firefox */
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

@-webkit-keyframes identifier {
  /* Chrome, Opera and Safari */
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

@keyframes identifier {
  /* Standards compliant */
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

所以我们需要添加-ms前缀来覆盖微软系列的浏览器，以及-o来覆盖旧Opera浏览器，即Opera内核换成Blink之前的版本。

这就是Autoprefixer插件或好的自动化构建工具出世的原因，方便我们编写代码。

requestAnimationFrame()是一个非常棒的API，但是它所有的脚本都是在页面跑的，你只有16.6ms的时间将一切搞定，以让next frame加入。如果因为一些原因，脚本没有在规定时间内完成它们的工作，我们在动画方面就会有些紧张，缓慢和迟钝的脚本会阻塞页面上的一些活动。

了解Web动画API

Web动画API（WAAPI）是一个新的JavaScript API，旨在规范Web上创建动画的方式。我建议取代SMIL（这也是为什么SMIL会在Chrome和Opera中被抛弃的原因之一）和支持CSS Transitions及animations。

Alex Danilo在Google开发者大会介绍了Web动画API（WAAPI）。这是一个高水平的关于API的概述，关于它如何工作以及可以用于何处：

关于WAAPI的presentation，最让我着迷的是Rachel Nabors 2015年在SFHTML5的演讲。除了对Web animation非常多的激情，还给非技术观众做了相当好的讲解。

视频来自于YouTube，天朝同学浏览，请自备天梯。

所以现在我们对于WAAPI有了稍微更多的认识，接下来我们来看看如何使它工作。

它是如何工作的

这一节使用的是Dan Wilson的Web Animation API tutorial中的代码，中文译文见这里。所有的Web动画实例都有3个组成部分。第一个部分是我们要添加动画的元素的.animate()声明。

var player = document.getElementById('toAnimate').animate()

动画函数接受2个参数。第一个是一个KeyframeEffects数组，设置你想让动画发生的位置，和CSS中的@keyframes声明相似。当我们看完整的实例时，就会发现区别。

每个属性的值需要和你如何在JavaScript中使用element.style指定的相匹配，如透明度opacity接受数字number，而transform接受字符串string。

var player = document.getElementById('toAnimate').animate([
 { transform: 'scale(1)', opacity: 1, offset: 0 },
 { transform: 'scale(.5)', opacity: .5, offset: .3 }
 { transform: 'scale(.667)', opacity: .667 },
 { transform: 'scale(.6)', opacity: .6 }
'], {});

第二个参数是一个时间函数列表。它会映射到CSS动画属性，尽管有时候名称略有不同。

var player = document.getElementById('toAnimate').animate([ ],
{
    duration: 700, //毫秒
    easing: 'ease-in-out', //值为'linear', 或贝塞尔曲线, 等等
    delay: 10, //毫秒
    iterations: Infinity, //或者为数字
    direction: 'alternate', //'normal', 'reverse', 等等.
    fill: 'forwards' //'backwards', 'both', 'none', 'auto'
});

完整的实例如下：

var player = document.getElementById('toAnimate').animate([
    { transform: 'scale(1)', opacity: 1, offset: 0 },
    { transform: 'scale(.5)', opacity: .5, offset: .3 },
    { transform: 'scale(.667)', opacity: .667 },
    { transform: 'scale(.6)', opacity: .6 }
  ], {
    duration: 700, //毫秒
    easing: 'ease-in-out', //值为'linear', 或贝塞尔曲线, 等等
    delay: 10, //毫秒
    iterations: Infinity, //或者为数字
    direction: 'alternate', //'normal', 'reverse', 等等。
    fill: 'forwards' //'backwards', 'both', 'none', 'auto'
  });

相比之下，相同的动画，使用keyframes完成如下：

@keyframes emphasis {
  0% {
    transform: scale(1); 
    opacity: 1; 
  }
  39% {
    transform: scale(.5); 
    opacity: .5; 
  }
  78.75% {
    transform: scale(.667); 
    opacity: .667; 
  }
  100% {
    transform: scale(.6);
    opacity: .6; 
  }
}
#toAnimate {
  animation: emphasis 700ms ease-in-out 10ms infinite alternate forwards;
}

这只是一点基础，我们将探讨更多语法方面，以及如何进一步提高。

浏览器支持情况？

很多新的JavaScript API，浏览器支持是不一致的。Chrome中对Web动画的支持是最好（原生）的（包括新Opera）；Firefox对于API支持有限（查阅are we animated yet?文档），而Edge则正在开发。Safari则例外，没有提供支持（目前或者计划，都没有）。

支持API意味着很多问题。没有浏览器能够支持完整的规范，但是你可以使用下面的页面来测试你的浏览器支持哪些方面的API。

测试你的浏览器是否支持WAAPI

需要的polyfill

对于不支持规范（即不支持全部的功能）的浏览器，Github上有polyfill。polyfill有几个版本，我对web-animation-next这个版本比较感兴趣。它支持目前规范中拟议的功能，以及规范中尚在讨论的功能。

我们的实例中的所有功能，在Chrome中或者通过polyfill可以原生工作。

本文根据@publishingProject的《Web animations: Learning to love the API》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://publishing-project.rivendellweb.net/web-animations-learning-to-love-the-api/。

彦子

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

如需转载，烦请注明出处：https://www.fedev.cn/animation/web-animations-learning-to-love-the-api.htmlNike Zoom Haven 97 Clot White Gum