javascript动画模版 js动画代码

转载

月光倾城美 2023-12-07 08:41:45

文章标签 javascript动画模版序列 Promise JavaScript 函数 文章分类 JavaScript 前端开发

基于 Promise 的动画库

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

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

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

具体实现

其实整个库实现起来并不复杂，只需要将基础动画封装为 Promise 就可以了。

不过在这里，为了兼容老版本的浏览器，我们先对一些基础函数进行封装：

function nowtime(){
  if(typeof performance !== 'undefined' && performance.now){
    return performance.now();
  }
  return Date.now ? Date.now() : (new Date()).getTime();
}

动画是关于时间的函数

接下来，我们对 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 事件，在这里可以改变元素的属性，从而实现动画。update 事件回调提供两个参数，第一个是 ep，是经过 easing 之后的动画进程，第二个是 p，是不经过 easing 的动画进程，ep 和 p 的值都是从 0 开始，到 1 结束。（为什么要使用 ep 和 p，在前一个动画教程里已经说明了。）

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

通过将 animator 封装为带有返回 Promise 接口的方法

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