微信小程序中使用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

上一篇:

下一篇: