了解JavaScript Web Animations API

共计 3305 个字符，预计需要花费 9 分钟才能阅读完成。

Web Animations API为浏览器和开发人员提供了一种用于描述 DOM 元素动画的通用方法。实现网页 DOM 元素动画的方法有很多，最常用的是通过 CSS3 transitions 和 CSS3 keyframes 帧动画来实现。例如 animate.css 动画库。也有很多 js 插件可以实现 DOM 元素动画效果，例如Velocity。

有了 Web Animations API，我们可以不依赖于 CSS3 或 js 插件，就可以制作出炫酷的网页动画效果。

创建动画

首先来看一个简单的例子，对比一下 CSS3 keyframes 帧动画和 js Web Animations API 的动画效果。

CSS keyframes

JS Web Animation API

通过 CSS 方法来创建动画

在上面的 CSS3 动画中，我们使用 @keyframes 帧动画来制作，并通过animate class 类将动画应用到 DOM 元素上。

.animate {
    animation-name: move-and-change-color;   
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

@keyframes move-and-change-color {
    0% {transform: translateX(0);
    }

    80% {transform: translateX(100px);
        background-color: #2196F3;
    }

    100% {transform: translateX(100px);
        background-color: #EF5350;
    }
}

要在用户点击图形的时候产生动画效果，必须为 DOM 元素添加事件监听。

var square = document.getElementById('square');
    
square.addEventListener('click', function() {square.className += "animate";});

以上是我们最常用的制作 CSS3 动画的方法，下面来看看 js Web Animation API 给我们带来的改变。

通过 Web Animation API 来制作动画

我们可以通过 CSS 属性来描述 JavaScript 动画，例如：

var moveAndChangeColor = [
    {transform: 'translateX(0)',
        background: '#2196F3'    // 蓝色
    },
    { 
        offset: 0.8,
        transform: 'translateX(100px)', 
        background: '#2196F3'    // 蓝色
    },
    {transform: 'translateX(100px)',
        background: '#EF5350'    // 红色
    }
];

在上面的声明中，数组中的每一个对象代表动画的一个状态。在定义好动画状态数组之后，我们就可以通过 animate() 方法来调用它。animate()方法的第二个参数和 CSS animation属性相似，用于指定动画的持续时间，动画的循环次数等。

var circle = document.getElementById('circle');
  
circle.addEventListener('click', function() {
    circle.animate(moveAndChangeColor, {
        duration: 400,
        fill: 'forwards'
    });
});

控制动画

Web Animation API 允许我们对动画进行控制。animate()方法会返回一个Animate 对象，通过这个对象我们可以对动画进行控制。

var animation = elem.animate(transitions, options);

Web Animation API 提供了下面的方法来控制动画。

pause()：暂停动画的当前状态。
play()：恢复动画或在动画结束时重新开始动画。
reverse()：反向执行动画。
finish()：跳转到动画结束处。
cancel()：停止动画并返回动画开始处。

下面是一个控制动画的小例子：

通过下面的按钮来控制动画。

Pause Play Reverse Cancel

上面的例子的 js 代码如下：

var spinner = document.getElementById('spinner');
var spinnerAnimation = spinner.animate([
    {transform: 'rotate(0)'
    },
    {transform: 'rotate(359deg)'
    }
], {
    duration: 1000,
    iterations: Infinity
});

document.getElementById('pause').addEventListener('click', function() {spinnerAnimation.pause();
});
document.getElementById('play').addEventListener('click', function() {spinnerAnimation.play(); 
});
document.getElementById('reverse').addEventListener('click', function() {spinnerAnimation.reverse(); 
});
document.getElementById('cancel').addEventListener('click', function() {spinnerAnimation.cancel(); 
});

返回的 Animate 对象还包括一些有用的属性，例如当前时间，播放速度等。完整的属性列表可以参考MDN。例如下面的一个例子：

设置播放速度：

0.5 倍正常 2 倍 3 倍

上面的例子的 js 代码如下：

var spinner = document.getElementById('spinner');
var spinnerAnimation = spinner.animate([
    {transform: 'rotate(0)'
    },
    {transform: 'rotate(359deg)'
    }
], {
    duration: 1000,
    iterations: Infinity
});

document.getElementById('half').addEventListener('click', function() {spinnerAnimation.playbackRate = 0.5;});
document.getElementById('normal').addEventListener('click', function() {spinnerAnimation.playbackRate = 1;});
document.getElementById('double').addEventListener('click', function() {spinnerAnimation.playbackRate = 2;});
document.getElementById('triple').addEventListener('click', function() {spinnerAnimation.playbackRate = 3;});

另外，Web Animation API 在动画结束或被取消时提供了 2 个有用的事件处理方法。

spinnerAnimation.addEventListener('finish', function() {// Animation has completed or .finish() has been called.
    doSomething();});

spinnerAnimation.addEventListener('cancel', function() {
    // Animation has been canceled.    
    doSomething();});

浏览器支持

目前只有 chrome 和 firefox 浏览器支持 Web Animations API，你可以通过 caniuse 来查看浏览器对 Web Animations API 的支持情况。