Web动画API教程1：创建基本动画

作者：彦子 日期：2015-11-02 点击：1775
Animation
CSS3
Web动画API

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

我们已经初步了解了统一web动画API的内容，但是我们还没有真正去对规范的细节进行探讨，所以现在开始吧。

WAAPI为你提供了比你用于CSS动画更多的控件，但是在了解它们之前，我们先打一下基础：如何使用这个API创建一个基本的动画？

创建一个关键帧动画

如果你对CSS Transition和animation熟悉的话，下面的代码看起来应该不陌生。

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, //milliseconds
    easing: 'ease-in-out', //'linear', a bezier curve, etc.
    delay: 10, //milliseconds
    iterations: Infinity, //or a number
    direction: 'alternate', //'normal', 'reverse', etc.
    fill: 'forwards' //'backwards', 'both', 'none', 'auto'
  });

为了便于比较，这里再创建一个等效的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()

动画animate()会返回一个AnimationPlayer，帮助我们接下来做一些有趣的事情，所以你可能会希望创建一个变量来获取AnimationPlayer的引用。我们先找到我们想要添加动画的元素（这里我们直接用了document.getElementById），并调用animate函数。这个函数是规范中新增加的内容，所以你需要在使用前查看它的支持/是否存在，或者引入polyfill。

animate函数传入两个参数，一个是KeyframeEffects数组，一个是AnimationEffectTimingProperties选项。基本上第一个参数会映射到你放到CSS @keyframes中的内容，第二个参数是你将在你的CSS规则中使用animation-*属性（或animation简写，像我前面用的那样）指定的内容。这里有个关键的好处是我们可以使用变量或重用先前定义的KeyframeEffects，而用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 }
  ]);

对于每一个KeyframeEffect，我们把CSS中的百分比偏移量offset变成值为0到1的小数。它是可选的，如果你没有指定任何值，它们就会平均分布（所以如果你有三个，第一个的偏移量为0，第二个的偏移量为.5，第三个则为1）。你还可以指定一个easing属性，这和CSS中的animation-timing-function一样。KeyframeEffect中的其它属性也都是可以添加动画的属性。每个属性的值都应该和你在JavaScript中使用element.style指定的相匹配，即opacity的值应该是一个数字，而transform应该是字符串。

var player = document.getElementById('toAnimate').animate([], {
    duration: 700, //milliseconds
    easing: 'ease-in-out', //'linear', a bezier curve, etc.
    delay: 10, //milliseconds
    iterations: Infinity, //or a number
    direction: 'alternate', //'normal', 'reverse', etc.
    fill: 'forwards' //'backwards', 'both', 'none', 'auto'
  });

timing属性映射到CSS动画属性，尽管有时有不同的名字。早期的代码示例我们只讨论主要的选项。

下面是一个使用polyfill的示例（但是如果你是在最新的Chrome中查看，它应该是使用原生浏览器实现）。第一列的灰色方块是用的WAAPI，第二列红色方块使用的是CSS关键帧。

下一节

现在我们知道了如何根据我们已知的CSS来制作同等效果的动画，我们接下来看看animate函数返回的AnimationPlayer对象。这才是它真正的提升了功能特性的地方。

本文根据@Dancwilson的《Web Animations API Tutorial Part 1: Creating a Basic Animation》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://danielcwilson.com/blog/2015/07/animations-part-1/。

彦子

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

如需转载，烦请注明出处：http://www.w3cplus.com/css3/web-animations-api-tutorial-part-1-creating-a-basic-animation.html

返回顶部