javascript - 使用 OOP 方法重新启动 Canvas 动画

Question

我正在创建一个网页，您在键盘上按的每个键都会生成新的声音/动画。我目前只使用第一个键，但遇到一个问题，按下第一个键后，动画就会卡住。矩形(在本例中)将开始闪烁，而不是根据按下的键重新开始动画或开始新的动画。下面是我的一些代码。

class Drawable{
constructor(context, x = 0, y = 0, fillStyle = "#000", strokeStyle = "transparent", lineWidth = 0){
this.context = context;
if(!(this.context instanceof CanvasRenderingContext2D)){
  throw new Error("You must provide a valid canvas context to Drawables.");
}
this.x = x;
this.y = y;
this.fillStyle = fillStyle;
this.strokeStyle = strokeStyle;
this.lineWidth = lineWidth;
this.deltas = new Map();

this.limits = {
    max: new Map(),
    min: new Map()
};
}
draw(){
   this.context.save();
   this.context.translate(this.x, this.y);
   this.context.scale(2,1.5);
   this.context.fillStyle = this.fillStyle;
   this.context.strokeStyle = this.strokeStyle;
   this.context.lineWidth = this.lineWidth;
}
afterDraw(){
   this.context.restore();
}
 applyAnimation(secondsElapsed){
  for(const[propertyName, valueChangePerSecond] of this.deltas){
      const changedAmount = secondsElapsed * valueChangePerSecond;
      this[propertyName] += changedAmount;
      if(this.limits.max.has(propertyName)){
          this[propertyName] =     Math.min(this[propertyName],this.limits.max.get(propertyName));
      } else if(this.limits.min.has(propertyName)){
          this[propertyName] = Math.max(this[propertyName],this.limits.min.get(propertyName));
      }
   }  
   }
 }
  class Rectangle extends Drawable{  
constructor(context, x = 0, y = 0, fillStyle = "#000", strokeStyle = "transparent", lineWidth = 0, deltas = new Map(), width = 100, height = 100){
super(context, x, y, fillStyle, strokeStyle, lineWidth, deltas);
this.width = width;
this.height = height;
}

draw(){
super.draw();
this.context.fillRect( this.width / -2, this.height / -2, this.width, this.height);
this.context.strokeRect( this.width / -2, this.height / -2, this.width, this.height);
super.afterDraw();
}
loopDraw(){
    super.draw();
    let rectSize = 30;
    for(let i = 0; i < 3; i++){
        let yPos = (rectSize - 10)*i;
        for(let j = 0; j < 6; j++){
              this.context.fillRect((rectSize+10)*j,yPos,this.width/-2,this.height/-2);
            this.context.strokeRect(this.width / -2, this.height / -2, this.width, this.height);
        }
    }
    super.afterDraw();
}
}
const canvas = document.getElementById("soundBoardCanvas");
const context = canvas.getContext("2d");
  const animationAObjects = new Set();
 // Creating the rectangle and setting the animation properties of the rectangle
let animationARect = new Rectangle(context,canvas.width/1.5,canvas.height/2, randomColour(), "transparent", 0, new Map() ,50,50);

animationARect.deltas.set("y",100);
animationARect.deltas.set("height",50);
animationARect.deltas.set("width",50);
animationARect.deltas.set("x",100);
animationARect.limits.max.set("y", canvas.height/2);
animationARect.limits.max.set("x", canvas.width/2.5);
animationARect.limits.max.set("height",randomBetween(100,170));
animationARect.limits.max.set("width",randomBetween(100,170));

animationAObjects.add(animationARect);


function randomBetween(min,max){
let range = max - min;

let random = Math.random();
random = random * (range + 1);
random = random + min;

return random;
}

// Animates all of the objects in the selected set
function animationA(){
    requestAnimationFrame(animationA);
    context.clearRect(0,0,canvas.width,canvas.height);

    const diffSeconds = (Date.now() - lastTime) / 1000;
    lastTime = Date.now();

    if(diffSeconds > 0){
        for(const animationAObject of animationAObjects){
            animationAObject.applyAnimation(diffSeconds);
            animationAObject.draw();
        }
    }
}
document.addEventListener("keydown", (e) => {
e.preventDefault();
cancelAnimationFrame(requestId);
if(e.keyCode == 65){
    window.requestAnimationFrame(animationA);
}
});

Answer 1

您永远不会创建requestId(甚至在任何地方声明它)，因此应该抛出错误(至少在严格模式下)。然后，每次按下 a 时，您都会创建一个新的动画，这可能会相互干扰并导致闪烁(尽管我无法确切说出原因)。

let requestId = 0; // declare this!
let lastTime = Date.now(); // important initialisation

function animationA(){
    requestId = requestAnimationFrame(animationA);
//  ^^^^^^^^
    …
}
document.addEventListener("keydown", (e) => {
    e.preventDefault();
    cancelAnimationFrame(requestId);
    if (e.keyCode == 65) {
        requestId = window.requestAnimationFrame(animationA);
//      ^^^^^^^^^
    }
});