requestAnimationFrame 的实验性实践

记得当 requestAnimationFrame 出现时我立马就石更了，就跟初次玩耍 transition 时一样，欣喜若狂...

然后，然后特么的就懵逼了，这明明就是口挖不通的深井呀（如果是我傻，那我认了...）

一. 简介

随着页面上动画的使用越来越频繁，为了避免过多的定时器带来额外系统开销，一般的动画组件都会采用“统一帧管理”：只使用一个定时器，在每一动画帧依次调用所有注册的动画事件。

后来，一些浏览器推出各自私有Api提供动画管理，W3C也出了一份 WindowAnimationTiming interface 规范，也就是 requestAnimationFrame。

动画四要素：时长(dur)，即动画播放的时间总长。进度(per)，播放的进度，在区间 [0,1] 之内。帧间隔时间(frameTime)，即多长时间播放一帧。动画函数(animFun)，它是每一帧的渲染函数。

对动画优化而言，最需考虑的就是帧间隔时间 frameTime。

原生实现里的 frameTime 被设计为可根据 CPU 使用率、window 是否被最小化、元素是否被隐藏等因素进行动态调整。

浏览器可根据实际情况降低 fps 甚至停止动画。这比以前的 setTimeout 和 setInterval 不知道好到哪里去了。

二. 实践

简单点来讲：

注册动画使用 requestAnimactionFrame 函数，接受动画函数callback作为参数，并返回动画ID；

移除动画使用 cancelRequestAnimationFrame 函数，参数是动画ID；

动画函数执行时，会传入当前系统时间戳。

function timeout(dur, animFun, callback) {

    var nowTime, Timer, duration;

    function _run() {

        var per = Math.min(1.0, (Date.now() - nowTime) / duration);

        if (per >= 1) {

            _stop();

            if (callback) callback.call(this, duration);

        } else {

            if (animFun) animFun.call(this, per, duration);

            Timer = window.requestAnimationFrame(_run);

        }

    }

    function _start() {

        _go(dur); return this;

    }

    function _go(dur) {

        duration = dur, nowTime = Date.now(), _run(); return this;

    }

    function _stop() {

        window.cancelAnimationFrame(Timer); return this;

    }

    return {

        start: _start, stop: _stop, go: _go,

    };

}

var start = Date.now();

timeout(1000, function(per, dur){

    var offset = 500 * per + 0;

    if (per < 1) console.log('方块将从 0 移动' + offset + 'px 到 500');

}, function() {

    console.log(Date.now() - start);

}).start();

三. 遗留的问题

在进行每一秒运行一次的倒计时会误差很严重，并不是标准的一秒。

这源于 requestAnimactionFrame 的智能，会根据现有性能进行的速率调整....虽然很好，但好尴尬呀...

上文说到，“动画函数执行时，会传入当前系统时间戳”，这句话并不可信，

因为 webkitRequestAnimationFrame 是可以的，但 requestAnimactionFrame 不对。

其次， firefox 里有 mozRequestAnimationFrame，却没有对应的 mozCancelRequestAnimationFrame，非常坑爹...

所以得这样 window.removeEventListener('MozBeforePaint', animFun, false);

开始还跟同事说它很牛逼牛逼呀，现在啪啪打脸，还得保持微笑，因为它是如此的令人期待...

巴特西

requestAnimationFrame 的实验性实践

最新文章

热门文章