Web Animation初探

[gogoend]

首先我们来进行一个小测试。打开浏览器开发者工具，选择页面中任意一个可见元素，然后在控制台键入以下代码：

// demo1 - gogoend
$0.animate(
    [
        {transform:'translate(0)'},
        {transform:'translate(100px)'}
    ],
    {duration:6000}
)

之后我们就发现 —— 该元素动了……

有意思，这到底是什么神奇的能力，居然让一个没有设置CSS动画的元素动了起来？笔者查了查资料，发现这里的 animate 函数来自于 Web Animations API 。

Web Animations API 是什么？

Web Animations API（下文简称”WAAPI“）是一种新的动画技术，用于驱动DOM元素产生动画。

上古时代，网页中元素的动画一般都是依赖于JavaScript来进行实现的；通常使用 jQuery 中的 animate函数、类似tween.js的动画库 或自己编写定时器来驱动动画。 CSS3 标准出现后，动画关键帧被定义在了 CSS 中，动画状态等可直接通过设置CSS属性来进行更改，开发者不必再手动地去维护定时器。 而 WAAPI 的出现，则又让动画回到了 JavaScript 中。那在WAAPI中，有哪些东西值得我们一探究竟呢？

参考资料：Web Animations API - Web APIs | MDN

document 对象上有关WAAPI的内容

document 对象上有 timeline 属性 和 getAnimations 方法。

timeline

返回当前文档的时间轴，形如：

DocumentTimeline {currentTime: 3517.912}

currentTime是当前文档自页面开始加载算起的时间

getAnimations

该函数返回了文档中所有正在执行、将要执行的动画

DOM 元素上有关WAAPI的内容

Element 原型上包含 animate 和 getAnimations 两个方法，这使得浏览器中所有 DOM 元素都具有以下两个方法。

animate( keyframes, options)

如demo1中的代码所示，animate函数接受两个参数，第一个参数是动画关键帧keyframes，第二个是动画时间的配置options —— 这看起来和笔者之前尝试封装的动画库Anikyu有所相似。

• keyframes 当前元素动画的关键帧。
• options 当前动画时间相关的一些配置。如果该值是一个数值，则表示动画持续时间；同样该值也可以接受一个对象，来为动画进行更多配置。 若该值为对象，则对象中有效的属性如下：
  • id
  • delay
  • direction
  • duration
  • easing
  • endDelay
  • fill
  • iterationStart
  • iterations

getAnimations( options )

该函数返回一组在当前对象上正在执行或将会执行的Animation对象。该函数可接受一个对象options作为可选参数：

• subtree 用于指定是否返回后代元素中的动画

Animation 对象

在demo1中，我们执行了DOM元素上的animate方法，该方法执行后，元素的动画就开始了，事实上该函数同时还返回了一个Animation对象。 可以说，Animation对象就是 Web Animations 的核心，其中包含有当前动画的状态与一系列控制动画进程的方法。

Animation 对象的属性

• currentTime
• effect
• finished
• id
• pending
• playState
• playbackRate
• ready
• replaceState
• startTime
• timeline

Animation 对象的事件

• oncancel
• onfinish
• onremove

Animation 对象的方法

• cancel
• commitStyles
• finish
• pause
• persist
• play
• reverse
• updatePlaybackRate