仅在设置新帧时将动画绘制到画布？

Question

我有一些 JavaScript 代码在画布上使用基于精灵的动画，我正在尝试看看我是否可以让它更高效。我已经在使用requestAnimationFrame，但由于它是基于交互的，我还试图弄清楚如何让它在设置新框架时只绘制框架。但是，无论我尝试什么，即使动画没有运行，它似乎仍然在绘制新帧。有时更改代码甚至似乎会增加 CPU 使用率。我真的很困惑这里发生了什么。

这是原始代码：

function CanvasSprite(canvas, width, height, sprite_url, rows, columns, total_frames) {
  	this.canvas = canvas;
    this.width = width;
 	this.height = height;
  	this.rows = rows;
	this.columns = columns;
	this.total_frames = total_frames;
	this.frame = 0;

    var scope = this,
    	func = function(){
    			scope.onSpriteSheet.call(scope);
        		}
    this.load('img', 'spritesheet', sprite_url, func);
};

CanvasSprite.prototype.onSpriteSheet = function() {
  	this.sw = this.spritesheet.width / this.columns;
  	this.sh = this.spritesheet.height / this.rows;
    this.tick(new Date().getTime());
};

CanvasSprite.prototype.load = function(type, prop, url, callback) {
  	this[prop] = document.createElement(type);
  	this[prop].addEventListener('load', callback);
    this[prop].src = url;
};
	
CanvasSprite.prototype.draw = function() {
	var relativeFrame = Math.round(this.frame * (this.total_frames-1));	
	var column_frame = relativeFrame % this.columns;
  			
  	var sx = this.sw * column_frame;
  	var sy = this.sh * Math.floor(relativeFrame / this.columns);

	var context = this.canvas.getContext('2d');
	context.clearRect(0, 0, this.width, this.height);
  	context.drawImage(this.spritesheet, sx, sy, this.sw, this.sh, 0, 0, this.width, this.height);
};
		
CanvasSprite.prototype.tick = function(time) {
      var scope = this,
      func = function(time){
        scope.draw(time || new Date().getTime());
        requestAnimationFrame(func, scope.id);
        //console.log("drawing");
      };
      func();
};

CanvasSprite.prototype.setFrame = function(frame) {
	this.frame = frame;
    //this.tick(new Date().getTime());
    //putting tick() here actually makes it slower :p
};

尝试进一步修改它：

function CanvasSprite(canvas, width, height, sprite_url, rows, columns, total_frames) {
  	this.canvas = canvas;
    this.width = width;
 	this.height = height;
  	this.rows = rows;
	this.columns = columns;
	this.total_frames = total_frames;
    
    this.frameOld = null; //old frame for comparison
	this.frame = 0;

    var scope = this,
    	func = function(){
    			scope.onSpriteSheet.call(scope);
        		}
    this.load('img', 'spritesheet', sprite_url, func);
};

CanvasSprite.prototype.onSpriteSheet = function() {
  	this.sw = this.spritesheet.width / this.columns;
  	this.sh = this.spritesheet.height / this.rows;
    if(this.frame != this.frameOld) {
        this.tick(new Date().getTime()); //only call tick when new frame differs from old
    };
};

CanvasSprite.prototype.load = function(type, prop, url, callback) {
  	this[prop] = document.createElement(type);
  	this[prop].addEventListener('load', callback);
    this[prop].src = url;
};
	
CanvasSprite.prototype.draw = function() {
	var relativeFrame = Math.round(this.frame * (this.total_frames-1));	
	var column_frame = relativeFrame % this.columns;
  			
  	var sx = this.sw * column_frame;
  	var sy = this.sh * Math.floor(relativeFrame / this.columns);

	var context = this.canvas.getContext('2d');
	context.clearRect(0, 0, this.width, this.height);
  	context.drawImage(this.spritesheet, sx, sy, this.sw, this.sh, 0, 0, this.width, this.height);
};
		
CanvasSprite.prototype.tick = function(time) {
      var scope = this,
      func = function(time){
        scope.draw(time || new Date().getTime());
        requestAnimationFrame(func, scope.id);
        console.log("drawing");
      };
      func();
};

CanvasSprite.prototype.setFrame = function(frame) {
    this.frameOld = this.frame; //update frameOld with previous one
	this.frame = frame; //set new frame
};

无论我做什么，控制台都会说它与系统时钟同步绘制，即使我没有更新帧。 CPU 配置文件也反映了这一点。似乎我在这里缺少一些重要的东西。也许画布已经在幕后对其进行了优化，所以我的 JS 没有产生任何影响，或者只是用不必要的逻辑减慢了它的速度？

Answer 1

自己解决了！首先，使用isDirty 标志而不是尝试比较帧。然后，由于交互实际上以子帧间隔更新动画，因此将计算要绘制的实际帧的行移到 setFrame 函数中。还将用于同步动画的tick 函数移动到setFrame 中，并在加载时调用该函数以从零帧开始。这样就不会不断地传递新的日期和时间 最后，测试是否绘制新框架的条件需要在调用 draw 函数的闭包内。这是因为requestAnimationFrame 实际上比对画布的任何调用都要消耗更多的 CPU。

结果？不更新时没有 CPU 使用率，更新时会大幅减少:)

function CanvasSprite(canvas, width, height, sprite_url, rows, columns, total_frames) {
  	this.canvas = canvas;
    this.width = width;
 	this.height = height;
  	this.rows = rows;
	this.columns = columns;
	this.total_frames = total_frames;
    this.isDirty = true;

    var scope = this,
    	func = function(){
    			scope.onSpriteSheet.call(scope);
        		}
    this.load('img', 'spritesheet', sprite_url, func);
};

CanvasSprite.prototype.onSpriteSheet = function() {
  	this.sw = this.spritesheet.width / this.columns;
  	this.sh = this.spritesheet.height / this.rows;
    this.setFrame(0);
};

CanvasSprite.prototype.load = function(type, prop, url, callback) {
  	this[prop] = document.createElement(type);
  	this[prop].addEventListener('load', callback);
    this[prop].src = url;
};
	
CanvasSprite.prototype.draw = function() {	
	var column_frame = this.frame % this.columns;
  	var sx = this.sw * column_frame;
  	var sy = this.sh * Math.floor(this.frame / this.columns);
    
	var context = this.canvas.getContext('2d');
    context.clearRect(0, 0, this.width, this.height);
    context.drawImage(this.spritesheet, sx, sy, this.sw, this.sh, 0, 0, this.width, this.height);
};
		
CanvasSprite.prototype.tick = function(time) {
    var scope = this,
    func = function(time){
        if (scope.isDirty) {
            scope.draw(time || new Date().getTime());
            requestAnimationFrame(func, scope.id);
            scope.isDirty = false;
            //only draw to canvas when new frame differs from old
        };
    };
    func();
};

CanvasSprite.prototype.setFrame = function(frame) {
    var tempFrame = Math.round(frame * (this.total_frames-1));;
    if(tempFrame != this.frame) {
        this.frame = tempFrame;
        this.isDirty = true;
        this.tick(new Date().getTime());
    }
};