微信小程序 canvas 动画踩坑——requestAnimationFrame 帧渲染

在浏览器上绘制 canvas 动画的时候经常使用 window.requestAnimationFrame 这个 Api 的回调来进行循环的帧渲染。

使用 requestAnimationFrame 将会把动画帧渲染周期交给浏览器统一调度，实现更好的性能优化。

可是微信小程序并没有支持这个 Api，在模拟器上测试可以正常运行，可在真机上运行时会报错，没有这个方法。

所以我们只得想办法自己来模拟这个 Api 所做的工作。

requestAnimationFrame 能够将原本零散的帧渲染序列进行梳理，使得页面上所有动画帧都在同一周期进行渲染，以最大化利用系统资源。

一般浏览器的渲染周期为 60 次每秒，即每次间隔大约 16 毫秒。因此我们只需要写一段代码，来将渲染周期控制在 16 毫秒，就能够模拟出 requestAnimationFrame 的效果了。

var lastFrameTime = 0;
// 模拟 requestAnimationFrame
var doAnimationFrame = function (callback) {
    var currTime = new Date().getTime();
    var timeToCall = Math.max(0, 16 - (currTime - lastFrameTime));
    var id = setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);
    lastFrameTime = currTime + timeToCall;
    return id;
};
// 模拟 cancelAnimationFrame
var abortAnimationFrame = function (id) {
    clearTimeout(id)
}

现在就可以像使用 requestAnimationFrame 和 cancelAnimationFrame 一样使用 doAnimationFrame 和 abortAnimationFrame 了。