js帧动画

#自定义帧率动画处理方式

 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')
            })        
复制代码