OOP 메서드를 사용하여 캔버스 애니메이션 다시 시작

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 (또는 어디서든 선언). 그리고 나서 을 누를 때마다 새로운 애니메이션을 만들면 서로를 방해하고 깜박 거리게됩니다. (왜 그런지 정확히 알 수는 없지만).

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); 
//  ^^^^^^^^^ 
    } 
});