#自定义帧率动画处理方式
function frameAnimation(opts,cb) {
this.fps = opts.fps||30;
this.now = null;
this.then = Date.now();
this.interval = 1000/this.fps;
this.delta = null;
var self = this;
this.tick = function () {
requestAnimationFrame(self.tick);
self.now = Date.now();
self.delta = self.now - self.then;
if (self.delta > self.interval) {
// 这里不能简单then=now,否则还会出现上边简单做法的细微时间差问题。例如fps=10,每帧100ms,而现在每16ms(60fps)执行一次draw。16*7=112>100,需要7次才实际绘制一次。这个情况下,实际10帧需要112*10=1120ms>1000ms才绘制完成。
self.then = self.now - (self.delta % self.interval);
if(cb)cb()
}
};
this.tick()
};
var aaa = new frameAnimation({fps:10},function () {
console.log('绘制动画 10fps')
})
复制代码