微信小程序 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 了。

《微信小程序 canvas 动画踩坑——requestAnimationFrame 帧渲染》有5个想法

  1. 你好作者,我用了你的方法在小程序上写了一个动画,动画在andriod真机上很流畅,但是一到ios上直接微信卡掉,找不到解决办法。。

    1. 这只是一个在小程序里模拟浏览器上requestAnimationFrame的办法,达到固定动画帧率的效果。小程序上做Canvas动画性能很差,除非必要否则还是尽量别用吧。

发表评论

电子邮件地址不会被公开。