Web动画:学习使用API

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

如果你使用过SVG,你应该知道可以使用SMIL给SVG添加动画CSS Transitionskeyframes动画都可以操作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玩啊逗比的软件。努力向上,厚积薄发。

如需转载,烦请注明出处:http://www.w3cplus.com/animation/web-animations-learning-to-love-the-api.html

返回顶部