Web Animations API 入门教程第1部分:创建一个基本的动画

发表于 | 更新于: | 分类于 |
字数统计: 1,057 | 阅读时长 ≈ 4

Web Animations API 入门教程第1部分:创建一个基本的动画

这是 Web Animations API 入门教程系列的第1部分。我在2016年6月更新了系列内容，因为Chrome和Firefox都推出了主要更新（以及一些小规格更改）。如果您有想法或问题，或看到我已经误解了该规范，请在Twitter上与@dancwilson联系。

我们之前初步看了下 Web Animations API，但是我们没有得到任何真正的细节，所以现在我们来看看。

WAAPI（Web Animations API, 以下均简称WAAPI）为您提供更多的控制比您可能已经习惯使用的CSS动画，但在我们进入这些演示之前，我们需要设置基本目标：如何通过此API创建基本动画？

创建关键帧动画

如果您熟悉CSS Transitions/ Animations，这将非常熟悉。

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', a bezier curve等.
    delay: 10, //毫秒
    iterations: Infinity, //或其他数值
    direction: 'alternate', //'normal', 'reverse', 等.
    fill: 'forwards' //'backwards', 'both', 'none', 'auto'
  });

为了对照，这里是一个等效的CSS关键帧动画

@keyframes emphasis {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  30% {
    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()

动画将返回一个 Animation（以前在规范中称为 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与animation-timing-functionCSS中相同的属性。每个的其他属性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'
  });

时间属性将映射到CSS动画属性，尽管有时会使用不同的名称。较早的代码示例讨论了主要选项。

以下是使用polyfill的示例（但如果您正在Chrome 36+，Opera 23+或Firefox 48+中查看，则应使用实际的浏览器实现）。第一列灰色块使用WAAPI动画，第二列红色块使用CSS关键帧进行动画。

下一节…

现在我们知道如何创建在CSS中熟知的等效动画，我们将开始查看Animation 的 animate 函数返回的对象。这是我们看到真正的功能和改进的地方。

查看本系列的其余部分：

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

0%