[译文]网页动画API教程Part1:创建基本动画

原文：http://danielcwilson.com/blog/2015/07/animations-part-1/
翻译：xiaomiao

我们已经初步了解了一下网页动画API，但我们还没有进入到任何真正的细节。那么，现在就开始。

WAAPI比CSS动画给予你更多的控制权，但在进入这些额外部分的时候，我们需要了解一下基础：如何通过这些API创建基础的动画？

创建一个关键帧动画

如果你熟悉CSS过度/动画那么这个你看起来会觉得很相似。

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, offset: .7875 },
    { transform: 'scale(.6)', opacity: .6, offset: 1 }
  ], {
    duration: 700, //毫秒
    easing: 'ease-in-out', //'linear', 等贝塞尔曲线
    delay: 10, //毫秒
    iterations: Infinity, //或一个正整数
    direction: 'alternate', //'normal', 'reverse'等
    fill: 'forwards' //'backwards', 'both', 'none', 'auto'。backwards是动画结束后恢复原样，forwards是保持动画结束时的样子（猜测），其他未知
  });

相比之下，下面这个用CSS关键帧的实现是等效的

@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;
}

我们分解一下，解释其中每一步。

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

动画会返回一个”动画播放器”，后面我们可以利用它来做一些有趣的事，所以你很有可能会创建一个变量来捕获这个引用。我们查找到我们想要的元素(这里简单的用document.getElementById来获取)，然后调用了animate函数。这个函数是规格中新加的，所以你要么在使用之前先测试一下是否存在/受支持，要么引入这个兼容库。

Animate函数接收两个参数，一个关键帧数组和一个动画效果时间属性选项。第一个参数对应CSS规则中的 @keyframes，第二个参数则是你通过animation-*指定的属性（或者是animate简写，像上边的例子一样）。这里的关键好处在于我们可以使用变量或者重复使用前边定义的关键帧效果，然而使用CSS我们是受限于前面定义的值的。

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

对于每一个关键帧效果，我们将CSS中的百分数偏移改为从0到1的小数。然而它却是可选的，如果你不指定它们会被平均分布（比如写了3个关键帧，第一个的偏移offset会是0，第二个offset是.5，第三个则是1）。你也可以指定一个easing属性，对应CSS中的animation-timing-function，其他属性跟animate中的也是一样的。每个属性的值跟你用Javascript中的element.style指定时使用的值一样，所以opacity应该是一个数字，transform则是一个字符串。

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'
});

上边的示例代码就是主要的参数了。

这里是一个用兼容库实现的例子(如果你用了新版Chrome那就是浏览器原生实现（据caniuse网站显示版本号不低于Chrome 39和Firefox 39的支持）)。第一列灰色的块是使用WAAPI来实现动画，第二列红色的块则是使用CSS关键帧。【译者补充：好吧，其实我没有引入兼容库。如果第一列不能动说明你的浏览器还不支持。】

接下来。。。

现在我们已经知道如何使用WAPPI来创建等同于使用CSS所创建的动画，接着就来看看动画函数返回的“动画播放器”对象。那里才是我们要真正要挖掘的功能和改善。

[本文完]