Web Animations API 入门教程总结回顾

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

Web Animations API 入门教程总结回顾

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

我们已经涵盖了相当多的知识面，希望能够解决有关Web Animations API是什么（而不是什么）的问题。要总结这个系列，我们将回顾一下我们已经讨论过的内容，并看看尚未实现的内容。

为什么要用API？

在介绍中，我们讨论了API是如何将CSS，JS和SVG中的各种方法结合起来进行动画处理，旨在充分利用它们。这意味着，例如，JavaScript可以锁定CSS多年来的硬件加速，并不限于CSS的声明性。API并不意味着替换像GSAP这样的库，而只是为了在浏览器级别提供更多的选项。

Firefox和Chrome都已经开始实施，而Edge已经积压了很多事没有做。随着团队完成规范，polyfill可以让我们开始玩转它。

动画基础

要创建一个基本的动画，我们通过提供关键帧和时序属性来跟踪类似于CSS的结构。

var player = document.getElementById('toAnimate').animate([
    { transform: 'scale(1)', opacity: 1, offset: 0 },
    { transform: 'scale(.6)', opacity: .6, offset: 1 }
  ], {
    duration: 700,
  });

时间轴控制是当前CSS中明显不存在的部分。通过playState属性读取动画的状态，并改变状态，例如play()，pause()，和finish()。我们也可以通过读/写playbackRate属性将播放速度更改或更快。currentTime可读写，我们可以设置当动画与完成回调onfinish。

多个动画和分组

Web Animations API允许对元素设置多个动画，创建单独的动画对象。document上默认的timeline可以使用getAnimations()方法让我们访问创建的所有动画。可以通过使用GroupEffects 和 SequenceEffects（在polyfill中提供但不在Level 1规范中）将动画组合在一起或一个接一个地进行播放。

运动路径与未来

在这个系列中，沿着一条路径运动让我们看到了它在CSS中的第一个实现，但还有很多其他模块尚未实现。

间距(Spacing)

如果在关键帧中没有设置offset，则当前的实现使用默认的间隔，这意味着它们是均匀分布的（例如，三个帧将具有0,1,5和1的偏移量）。该规范还定义了一种基于属性来调整动画的方法，以使其具有恒定的变化率。当讨论Spacing keyframes时，该规范描述了这一点。

Promises

该规范已经演变成–包括ready在内的，每次动画取消或进入挂起状态（通常在更改为“运行”或“已暂停”）之前将会被新的Promise替换。除了onfinish, 我们在本系列中讨论的使用回调之外，我们还可使用finished返回的Promise在动画完成后运行其他功能。

让我们继续谈论Web动画API

人们开始更多地谈论这个API，我希望这个讨论继续下去。规格，浏览器实现和polyfill已经持续了一段时间，他们准备好仔细检查。

有时CSS会有更多场景，有时候是requestAnimationFrame，有时使用类库会是最好的解决方案。知道什么时候使用什么是好的，这个API提供了不少以前我们以前没有的可用的东西，所以很有趣。

查看本系列的其余部分：

【翻译原文】： http://danielcwilson.com/blog/2015/09/animations-conclusion/

0%