用65行代码实现JavaScript动画序列播放

见贤思齐

最近在给学生上课，上周六的第一堂课是关于 JavaScript 动画的内容，其中包括一些简单的动画，比如匀速或者匀加/减速的运动，也包括复杂一些的组合动画。而动画的基本原理，在我之前的文章[1]已经有了详细的介绍。在这里，我想谈一谈的是，我们可以如何针对现代浏览器设计更加简单的 API，来实现动画的序列播放。基于 Promise 的动画库所谓的动画序列，也就是说可以在上一段动画播放结束之后进行下一段动画的播放，这样可以方便用多段动画实现各种不同的复杂效果。而我们不难想到，要实现这个目的，将动画接口实现成 Promise 是一个非常好的方案：letanimator=newAnimator(2000,function(p){lettx=-100*Math.sin(2*Math.PI*p),ty=-100*Math.cos(2*Math.PI*p);block.style.transform='translate('+tx+'px,'+ty+'px)';});block.addEventListener('click',asyncfunction(evt){leti=0;//noprotectwhile(1){awaitanimator.animate()block.style.background=['red','green','blue'][i++%3];}});上面这个例子，在支持 async/await 的现代浏览器中代码非常简洁和优雅。如果要兼容旧的浏览器，也并不复杂，只需要针对 es6-promise 做 polyfill[2] 或引入第三方库[3]即可。再来看一个例子：vara1=newAnimator(1000,function(p){vartx=100*p;block.style.transform='translateX('+tx+'px)';});vara2=newAnimator(1000,function(p){varty=100*p;block.style.transform='translate(100px,'+ty+'px)';});vara3=newAnimator(1000,function(p){vartx=100*(1-p);block.style.transform='translate('+tx+'px,100px)';});vara4=newAnimator(1000,function(p){varty=100*(1-p);block.style.transform='translateY('+ty+'px)';});block.addEventListener('click',asyncfunction(){awaita1.animate();awaita2.animate();awaita3.animate();awaita4.animate();});有了 Promise，像这样的序列运动非常简单。那么要实现这个动画库，具体该怎么做呢？具体实现其实整个库实现起来并不复杂，只需要将基础动画封装为 Promise 就可以了。不过在这里，为了兼容老版本的浏览器，我们先对一些基础函数进行封装：functionnowtime(){if(typeofperformance!=='undefined'&performance.now){returnperformance.now();}returnDate.nowDate.now()newDate()).getTime();}我们说动画是关于时间的函数，因此我们需要一个简单的获取时间功能。在新的 requestAnimationFrame 规范[4]中，frame 回调的参数 timestamp 是一个 DOMHighResTimeStamp[5] 对象，它比 Date 的计时要更精确（可以精确到纳秒）。因此获取时间我们优先使用 performance.now()，如果浏览器不支持 performance.now()，我们再降级使用 Date.now()。接下来，我们对 requestAnimationFrame 进行 polyfill：if(typeofglobal.requestAnimationFrame==='undefined'){global.requestAnimationFrame=function(callback){returnsetTimeout(function(){//polyfillcallback.call(this,nowtime());},1000/60);}global.cancelAnimationFrame=function(qId){returnclearTimeout(qId);}}然后，是具体的 Animator 实现：functionAnimator(duration,update,easing){this.duration=duration;this.update=update;this.easing=easing;}Animator.prototype={animate:function(){varstartTime=0,duration=this.duration,update=this.update,easing=this.easing,self=this;returnnewPromise(function(resolve,reject){varqId=0;functionstep(timestamp){startTime=startTime||timestamp;varp=Math.min(1.0,(timestamp-startTime)/duration);update.call(self,easingeasing(p):p,p);if(peaseInOutBack(1-p));//reversea1block.addEventListener('click',asyncfunction(){awaita1.animate();awaita2.animate();});用 CSS3 如何？的确，许多动画可以用 CSS3 来实现。不过 JavaScript 动画与 CSS3 动画有其不同的特点和使用场景。总体来说， CSS3 动画适用于任何纯展现效果的简单动画。虽然它也能提供基本的动画组合方法（有 animationEnd 时间，但标准化较晚），但操作起来依然不方便，而且还需要 JavaScript 来控制。有些动画库用降级的方式，能采用 CSS3 动画的采用 CSS3 动画，不能的自动降级为 JavaScript 动画，这不失为一种好方式，但也有利有弊。因为 CSS3 动画是绑定为操作元素属性的，而 JavaScript 更灵活一些。就像我们这个封装的动画库，其实提供的是更底层的 API，操作的只是时间和进度，并没有耦合任何元素、属性或者其他展示类的东西，因此它完全可以用来操作 DOM、Canvas、SVG、音频/视频流甚至是其他异步动作。另外，如果在动画过程中需要有其他一些精细的动作处理，也还是应该使用 JavaScript 动画而不是 CSS3 动画。总结使用 Promise 实现的简单动画库，能够很好地执行组合的时序动画，配合 async/await 代码实现简洁且优雅，同时还具有非常好的扩展性，能够组合出非常强大的动画效果。我相信这将成为未来浏览器上 JavaScript 动画的主要实现方式。最后，可以访问 GitHub repo[8] 获取最新代码。参考资料[1]之前的文章: https://www.h5jun.com/post/animations-you-should-know.html[2]针对 es6-promise 做 polyfill: https://github.com/stefanpenner/es6-promise[3]第三方库: http://bluebirdjs.com/docs/getting-started.html[4]requestAnimationFrame 规范: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame[5]DOMHighResTimeStamp: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame[6]easing: http://easings.net/zh-cn[7]前一个动画教程: https://www.h5jun.com/post/animations-you-should-know.html[8]GitHub repo: https://github.com/akira-cn/animator.js