了解JavaScript Web Animations API

05-19 次

标签动画 javascript

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()：停止动画并返回动画开始处。

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

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

上面的例子的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。例如下面的一个例子：

设置播放速度：

上面的例子的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();
});