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

最新推荐文章于 2024-10-02 05:39:15 发布

2401_84103903

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量876

点赞数 27

分类专栏：程序员文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2401_84103903/article/details/137895111

版权

程序员专栏收录该内容

180 篇文章 0 订阅

订阅专栏

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);

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§{

var ty = 200 * p * p;

block.style.transform = ‘translateY(’

+ ty + ‘px)’;

});

var a2 = new Animator(1414, function§{

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] 获取最新代码。