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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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 动画踩坑——棘手的椭圆

最近正在给我的微信小程序开发一个天气预报的页面,页面的效果如下:

计划页面有两个 canvas,一个用来实时绘制上半部分的天气动画,一个用来绘制中间的气温趋势折线图。

上半部分天气动画在不同的天气下有不同的效果,比如不同强度的降雨会有相应的雨滴从上面落下,阴天多云的时候顶部会有云朵在漂浮,多云转晴的话后面再加上个太阳。

降雨的动画不难,无非就是随机生成一些雨滴对象,每一帧实时更新位置即可。

关键在云朵的动画上,我们需要生成随机宽高的椭圆形云朵,并且云朵沿着随机椭圆轨迹运动。

阅读更多