Web Animations API 入门教程第3部分: 多个Animations对象

发表于 | 更新于: | 分类于 |
字数统计: 687 | 阅读时长 ≈ 3

Web Animations API 入门教程第3部分: 多个Animations对象

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

在我们讨论动画和时间线控制之后，让我们来讨论多个动画。

每个元素的多个动画

在这个例子中，每个矩形都有三个动画应用（涉及到transform，opacity和color）。您可以多次调用元素的animate()方法，类似于允许多个动画的CSS。

使用CSS：

#toAnimate {
  animation: pulse 1s, activate 3000ms, have-fun-with-it 2.5s;
}
@keyframes pulse { /* ... */ }
@keyframes activate { /* ... */ }
@keyframes have-fun-with-it { /* ... */ }

使用Web Animations API：

var animated = document.getElementById('toAnimate');
var pulseKeyframes, //在这里定义 keyframes.
    activateKeyframes,
    haveFunKeyframes;
var pulse = animated.animate(pulseKeyframes, 1000); // 第二个数值参数作为持续时间的缩写
var activate = animated.animate(activateKeyframes, 3000);
var haveFunWithIt = animated.animate(haveFunKeyframes, 2500);

使用Web Animations API，这将创建三个Animation对象，每个对象可以通过时间轴(timeline)或播放速率(playback rate)进行暂停，播放，完成，取消的操作。

获取 Animations，全部动画对象

所以你可以知道一个动画开始播放了，但是当你想在元素上调用animate()时你却还没有捕获到Animation的引用。那要怎么做？

该规范允许getAnimations()在文档上的方法。在最新版本的规范中，它直接在document（document.getAnimations()）上，在Firefox 48+上它是这样实现的。然而，对于Chrome 52 和polyfill（如V2.2.0的），则根据该旧规范将其置于新的timeline对象上。

// 如果引用了 polyfill ，你可以这样写
var animations = document.getAnimations ? document.getAnimations() : document.timeline.getAnimations();
// 返回一个数组，包含所有正在进行的（除了已完成的和被取消的）动画

在CodePen示例中，您将看到随机的持续时间，延迟和无限持续时间的变换移动的几个点。“暂停全部”按钮调用getAnimations()并遍历所有, 返回的玩家（每个动画对象）并暂停每一个。

下一节…

在下一部分中，我们将看看WAAPI动画可以创建的不同方式（因为它不仅仅是element.animate）。提示：document.timeline会出现更多的体现。

查看本系列的其余部分：

【翻译原文】: http://danielcwilson.com/blog/2015/08/animations-part-3/

0%