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

谁借莪１个温暖的怀抱￠ 2023-01-13 10:10 168阅读 0赞

最近在给学生上课，上周六的第一堂课是关于 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;
    }
    
    Animator.prototype = {
    
      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 如何？ ##

的确，许多动画可以用 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\]