WebAnimationApi入门在网页中使用动画可以提供更好的用户体验,例如抽屉菜单。到目前为止,网页动画可以通过css3transitions、css3keyframes或其他动画库(animate.css、Velocity,tween),现在我们可以用js写更多的自由网页动画了,也就是网页动画制作动画,我们使用css3和网页动画api写了一个简单的demo来展示网页动画的特点。Democss方法varsquare=document.getElementById('square');square.addEventListener('click',function(){square.className+="animate";});.animate{animation-name:move-and-change-color;动画持续时间:0.4s;animation-fill-mode:forwards;}@keyframesmove-and-change-color{0%{transform:translateX(0);}80%{转换:translateX(100px);背景色:#2196F3;}100%{转换:translateX(100px);背景色:#EF5350;}}网页动画方法varmoveAndChangeColor=[{transform:'translateX(0)',background:'#2196F3'//blue},{offset:0.8,transform:'translateX(100px)',background:'#2196F3'//蓝色},{transform:'translateX(100px)',background:'#EF5350'//红色}];//数组中的每个对象代表一个动画状态varcircle=document.getElementById('circle');circle.addEventListener('点击',function(){circle.animate(moveAndChangeColor,{duration:400,fill:'forwards'});});控制动画通过上面的例子可以很容易的对比出来,css3的方式有很大的局限性,不适合做复杂的动画,也不好控制,而WebAnimationApi适合做复杂的动画,容易控制varanimation=elem.animate(过渡,选项);WebAnimationApi提供了以下方法:pause()–暂停动画play()–播放动画reverse()–反向播放finish()–立即结束动画cancel()–取消动画并返回初始状态。具体使用方法请参考Demo属性和事件监听。动画运行过程中,会通过animate返回动画属性对象,比如动画播放速率-playbackrate,MovetoDemo另外,我们还可以监听finish和cancel事件,做其他有意义的事spinnerAnimation.addEventListener('finish',function(){//动画已经完成或者.finish()已经被调用。doSomething();});spinnerAnimation.addEventListener('cancel',function(){//动画已被取消。doSomething();});兼容性大多数chrome和firefox支持WebAnimationApi,其他如ios和Android不支持,详情请参考Caniuse。如果不支持,可以使用polyfill相关资料UsingtheWebAnimationsAPIAnimateloLet'stalkabouttheWebAnimationsAPI原文地址GettingStartedWithTheJavaScriptWebAnimationAPI