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

  最近在给学生上课,上周六的第一堂课是关于 JavaScript 动画的内容,其中包括一些简单的动画,比如匀速或者匀加/减速的运动,也包括复杂一些的组合动画。而动画的基本原理,在我之前的文章[1]已经有了详细的介绍。在这里,我想谈一谈的是,我们可以如何针对现代浏览器设计更加简单的 API,来实现动画的序列播放。

  基于 Promise 的动画库

  所谓的动画序列,也就是说可以在上一段动画播放结束之后进行下一段动画的播放,这样可以方便用多段动画实现各种不同的复杂效果。而我们不难想到,要实现这个目的,将动画接口实现成 Promise 是一个非常好的方案:

  let animator=new Animator(2000, function(p){

  let tx=-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', async function(evt){

  let i=0;

  //noprotect

  while(1){

  await animator.animate

  block.style.background=['red','green','blue'][i++%3];

  }

  });

  上面这个例子,在支持 async/await 的现代浏览器中代码非常简洁和优雅。如果要兼容旧的浏览器,也并不复杂,只需要针对 es6-promise 做 polyfill[2] 或引入第三方库[3]即可。再来看一个例子:

  var a1=new Animator(1000, function(p){

  var tx=100 * p;

  block.style.transform='translateX('

  + tx + 'px)';

  });

  var a2=new Animator(1000, function(p){

  var ty=100 * p;

  block.style.transform='translate(100px,'

  + ty + 'px)';

  });

  var a3=new Animator(1000, function(p){

  var tx=100 * (1-p);

  block.style.transform='translate('

  + tx + 'px, 100px)';

  });

  var a4=new Animator(1000, function(p){

  var ty=100 * (1-p);

  block.style.transform='translateY('

  + ty + 'px)';

  });

  block.addEventListener('click', async function{

  await a1.animate;

  await a2.animate;

  await a3.animate;

  await a4.animate;

  });

  有了 Promise,像这样的序列运动非常简单。那么要实现这个动画库,具体该怎么做呢?

  其实整个库实现起来并不复杂,只需要将基础动画封装为 Promise 就可以了。不过在这里,为了兼容老版本的浏览器,我们先对一些基础函数进行封装:

  function nowtime{

  if(typeof performance !=='undefined' && performance.now){

  return performance.now;

  }

  return Date.now ? Date.now : (new Date).getTime;

  }

  我们说动画是关于时间的函数,因此我们需要一个简单的获取时间功能。在新的 requestAnimationFrame 规范[4]中,frame 回调的参数 timestamp 是一个 DOMHighResTimeStamp[5] 对象,它比 Date 的计时要更精确(可以精确到纳秒)。因此获取时间我们优先使用 performance.now,如果浏览器不支持 performance.now,我们再降级使用 Date.now。

  接下来,我们对 requestAnimationFrame 进行 polyfill:

  if(typeof global.requestAnimationFrame==='undefined'){

  global.requestAnimationFrame=function(callback){

  return setTimeout(function{ //polyfill

  callback.call(this, nowtime);

  }, 1000/60);

  }

  global.cancelAnimationFrame=function(qId){

  return clearTimeout(qId);

  }

  }

  然后,是具体的 Animator 实现:

  function Animator(duration, update, easing){

  this.duration=duration;

  this.update=update;

  this.easing=easing;

  }

  Animatortotype={

  animate: function{

  var startTime=0,

  duration=this.duration,

  update=this.update,

  easing=this.easing,

  self=this;

  return new Promise(function(resolve, reject){

  var qId=0;

  function step(timestamp){

  startTime=startTime || timestamp;

  var p=Math.min(1.0, (timestamp - startTime) / duration);

  update.call(self, easing ? easing(p) : p, p);

  if(p < 1.0){

  qId=requestAnimationFrame(step);

  }else{

  resolve(self);

  }

  }

  self.cancel=function{

  cancelAnimationFrame(qId);

  update.call(self, 0, 0);

  reject('User canceled!');

  }

  qId=requestAnimationFrame(step);

  });

  },

  ease: function(easing){

  return new Animator(this.duration, this.update, easing);

  }

  };

  module.exports=Animator;

  Animator 构造的时候可以传三个参数,第一个是动画的总时长,第二个是动画每一帧的 update 事件,在这里可以改变元素的属性,从而实现动画,第三个参数是 easing[6]。其中第二个参数 update 事件回调提供两个参数,一是 ep,是经过 easing 之后的动画进程,二是 p,是不经过 easing 的动画进程,ep 和 p 的值都是从 0 开始,到 1 结束。(为什么要使用 ep 和 p,在前一个动画教程[7]里已经说明了。)

  Animator 有一个 animate 的对象方法,它返回一个 promise,当动画播放完成时,它的 promise 被 resolve,使用者还可以在 promise resolve 前调用 cancel 方法,这样它的 promise 会被 reject。

  于是这样,很简单地我们就通过将 animator 封装为带有返回 Promise 接口的方法,实现了动画序列。它的实现虽然简单,但功能却是很强大的,用它实现的动画代码也很优雅:

  var a1=new Animator(1414, function(p){

  var ty=200 * p * p;

  block.style.transform='translateY('

  + ty + 'px)';

  });

  var a2=new Animator(1414, function(p){

  var ty=200 - 200 * p * (2-p);

  block.style.transform='translateY('

  + ty + 'px)';

  });

  block.addEventListener('click', async function{

  //noprotect

  while(1){

  await a1.animate;

  await a2.animate;

  }

  });

  我们还提供了一个 ease 方法(0.2.0+版),能够传入新的 easing,并返回新的 Animator 对象,这样我们就可以在原动画的基础上扩展我们的动画效果:

  var easeInOutBack=BezierEasing(0.68, -0.55, 0.265, 1.55);

  //easeInOutBack

  var a1=new Animator(2000, function(ep,p){

  var x=200 * ep;

  block.style.transform='translateX(' + x + 'px)';

  }, easeInOutBack);

  var a2=a1.ease(p=> easeInOutBack(1 - p)); //reverse a1

  block.addEventListener('click', async function{

  await a1.animate;

  await a2.animate;

  });

  的确,许多动画可以用 CSS3 来实现。不过 JavaScript 动画与 CSS3 动画有其不同的特点和使用场景。总体来说, CSS3 动画适用于任何纯展现效果的简单动画。虽然它也能提供基本的动画组合方法(有 animationEnd 时间,但标准化较晚),但操作起来依然不方便,而且还需要 JavaScript 来控制。有些动画库用降级的方式,能采用 CSS3 动画的采用 CSS3 动画,不能的自动降级为 JavaScript 动画,这不失为一种好方式,但也有利有弊。因为 CSS3 动画是绑定为操作元素属性的,而 JavaScript 更灵活一些。就像我们这个封装的动画库,其实提供的是更底层的 API,操作的只是时间和进度,并没有耦合任何元素、属性或者其他展示类的东西,因此它完全可以用来操作 DOM、Canvas、SVG、音频/视频流甚至是其他异步动作。另外,如果在动画过程中需要有其他一些精细的动作处理,也还是应该使用 JavaScript 动画而不是 CSS3 动画。

  使用 Promise 实现的简单动画库,能够很好地执行组合的时序动画,配合 async/await 代码实现简洁且优雅,同时还具有非常好的扩展性,能够组合出非常强大的动画效果。我相信这将成为未来浏览器上 JavaScript 动画的主要实现方式。最后,可以访问 GitHub repo[8] 获取最新代码。

上一篇:JavaScript深入之数组方法整理


下一篇:AJAX(一)—AJAX原理