在浏览器上绘制 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，一个用来实时绘制上半部分的天气动画，一个用来绘制中间的气温趋势折线图。

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

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

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