在浏览器上绘制 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 了。
你好作者,我用了你的方法在小程序上写了一个动画,动画在andriod真机上很流畅,但是一到ios上直接微信卡掉,找不到解决办法。。
检查一下你的代码吧,IOS对内存限制更严格,应该是哪个逻辑造成内存溢出了。
setTimeOut,性能上会不会有问题呀
这只是一个在小程序里模拟浏览器上requestAnimationFrame的办法,达到固定动画帧率的效果。小程序上做Canvas动画性能很差,除非必要否则还是尽量别用吧。
小恐龙牛逼
s