Web Animation Api 入门

<img src=”http://cdn.tutorialzine.com/w… alt=”Getting Started With The JavaScript Web Animation API” title=”Getting Started With The JavaScript Web Animation API”/>

在网页中运用动画供应了更好的用户体验，比方抽屉式菜单。

目前为止，web动画能够经由历程css3 transitions，css3 keyframes或许其他的动画库（animate.css、Velocity、tween），如今我们能够运用js编写越发自在的web动画，那就是web animation。

建立动画

我们分别用css3和web animation api写个简朴的demo用来展现web animation的特征。

Demo

• css要领

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

.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;
    }
}

• Web Animation要领

var moveAndChangeColor = [
    { 
        transform: 'translateX(0)',
        background: '#2196F3'    // blue
    },
    { 
        offset: 0.8,
        transform: 'translateX(100px)', 
        background: '#2196F3'    // blue
    },
    {
        transform: 'translateX(100px)',
        background: '#EF5350'    // red
    }
]; //数组中的每一个对象代表一个动画状况

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

掌握动画

经由历程上面的例子能够简朴的对比出，css3要领局限性较大，并不合适庞杂的动画，也不易于掌握，而Web Animation Api合适庞杂动画，而且易于掌握。

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

Web Animation Api 供应以下要领：

• pause() – 停息动画

• play() – 播放动画

• reverse() – 反向播放

• finish() – 马上完毕动画

• cancel() – 作废动画并回到初始状况

详细运用要领请看Demo

属性和事宜监听

动画运转的历程中会经由历程animate返回动画属性对象，比方动画播放速度-playbackrate，移步Demo

另外，我们还能够监听finish和cancel事宜做点其他有意义的事变

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 Animation Api，其他的比方ios、安卓都不支撑，详情请检察Caniuse

关于不支撑的能够是用polyfill

相干材料

• Using the Web Animations API

• Animatelo

• Let’s talk about the Web Animations API

原文地点

Getting Started With The JavaScript Web Animation API