Warum ändert sich die Farbe meines Canvas-Objekts nicht, nachdem setInterval() aufgerufen wurde?

Question

Ich versuche, mein Leinwandobjekt die Farbe automatisch alle 0,25 Sekunden während einer Animation ändern, wenn die setInterval() aber stattdessen jedes Mal ändert, wenn ich eine Taste drücke. Hier ist mein Code, um die Animation auszuführen.

// Creating the shape 
class Planet extends CompoundDrawable{ 
constructor(context,x = 0, y = 0, fillStyle = "#000", strokeStyle = "transparent", lineWidth = 0, deltas = new Map(), shapes = new Set()){ 
    super(context,x,y,fillStyle,strokeStyle,lineWidth,deltas); 

    const mainPlanetShape = new Circle(context,0,0,fillStyle,strokeStyle,0,new Map(),80); 
    this.shapes.add(mainPlanetShape); 

    const largePlanetCrater = new Circle(context,randomBetween(-23,23),randomBetween(-23,23),"darkgrey","transparent",0,new Map(),11); 
    this.shapes.add(largePlanetCrater); 

    for(let i = 0; i < 7; i++){ 
     const planetCrater = new Circle(context,randomBetween(-23,23),randomBetween(-24,24),"darkgrey","transparent",0,new Map(),randomBetween(3,6)); 

     this.shapes.add(planetCrater); 
    } 
    } 
} 

// Placing the shape on Canvas and animating it 
function startAnimationS(){ 
const animationSObjects = new Set(); 

const animationSPlanet = new Planet(context,-100,canvas.height/2,colourChanger(),"transparent",10,new Map()); 
// Context, x, y , fillStyle, strokeStyle, lineWIdth, new Map 
animationSObjects.add(animationSPlanet); 
//Setting up properties to animate 
setTimeout(() => 
{ 
    animationSPlanet.deltas.set("x",400); 
    animationSPlanet.deltas.set("angle",3); 
}, 1000) 
setTimeout(() => 
{ 
    animationSPlanet.deltas.delete("x"); 
    animationSPlanet.deltas.delete("fillStyle"); 
},4000) 

// Perform the animation 
function animationS(){ 
    requestId = requestAnimationFrame(animationS); 
    context.clearRect(0,0,canvas.width,canvas.height); 

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

    if(diffSeconds > 0){ 
     for(const animationSObject of animationSObjects) 
     { 
      if(animationSObject.x >= canvas.width/2.2) 
      { 
       animationSObject.x = 10; 
      } 
      animationSObject.applyAnimation(diffSeconds); 
      animationSObject.draw(); 
     } 
    } 
    } 
animationS(); 
} 

let counter = 0; 
let intervalInterchange; 
//Colour changing function 
function colourChanger() 
{ 
counter = counter - 10; 

    let colour1 = 110 - counter; 
     colour2 = 90 - counter; 
     colour3 = 50 - counter; 
     colour4 = 0.5; 

    let finalColour = "rgba(" + Math.round(colour1) + "," + Math.round(colour2) + "," + Math.round(colour3) + "," + Math.round(colour4) + ")"; 
    return finalColour; 
} 
if(intervalInterchange === "undefined") 
{ 
    setInterval(colourChanger,250); 
} else { 
    clearInterval(intervalInt); 
    intervalInt = undefined; 
} 

// Calling the function by the event 'keydown' 
document.addEventListener("keydown", (e) => { 
e.preventDefault(); 
stopAnimation(); 
if(e.keyCode > 64 && e.keyCode < 91){ 
    if(e.keyCode == 83) 
    { 
     startAnimationS(); 
    } else { 
    alert("Please enter a letter between A and Z"); 
    } 
}); 

Answer 1

Sie Fallenlassen der Rückgabewert der colourChanger Funktion. Sie können nicht erwarten, dass die setInterval-Funktion magisch weiß, wofür Sie sie verwenden möchten, also müssen Sie das selbst tun.

Statt die colourChanger Funktion direkt in einem Intervall von Aufrufen, rufen eine anonymus Funktion und innen, dass die Farbe der Form ändern:

setInterval(function() { 
    animationSPlanet.color = colourChanger(); // I still don't know how you store this thing's color. 
}, 250);