目前微信小程序中是没有requestAnimationFrame方法的，所以为了实现循环要么使用setInterval()，要么就写个requestAnimationFrame方法，在utils/util.js文件中添加如下代码：
const requestAnimationFrame = function(callback, lastTime) {
var lastTime;
if (typeof lastTime === 'undefined') {
lastTime = 0
}
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
lastTime = currTime + timeToCall;
var id = setTimeout(function() {
callback(currTime + timeToCall, lastTime);
},
timeToCall);
return id;
};
const cancelAnimationFrame = function(id) {
clearTimeout(id);
};
module.exports = {
requestAnimationFrame,
cancelAnimationFrame
}
调用：
import util from '../../utils/util.js'
Page({
data: {
frame: 0
},
onReady: function(e) {
this.animation()
},
draw: function() {
console.log(this.data.frame)
},
animation: function() {
this.setData({
frame: this.data.frame + 1
})
this.draw()
util.requestAnimationFrame(function() {
this.animation()
}.bind(this))
}
})
不过经测试，还是setInterval的性能好一些。浏览器中引用requestAnimationFrame代替setInterval是因为setInterval性能不如requestAnimationFrame，但是在小程序中可能对setInterval本身做了优化了吧，所以没有requestAnimationFrame。当然了，这都是我的猜测。
以上requestAnimationFrame代码改自 https://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/
0 条评论。