微信小程序中使用requestAnimationFrame

目前微信小程序中是没有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/

未经允许不得转载：前端撸码笔记 » 微信小程序中使用requestAnimationFrame