requestAnimationFrame und eventListener

Ich versuche ein illustriertes Buch (basic) zu machen. Es funktionierte gut, bis ich eine animierte Szene hinzufügte. Ich habe die animierte Szene mit requestAnimationFrame hinzugefügt. Obwohl es animiert, wechselt es nicht zwischen Szene vier (die animierte Szene) und Szene eins (die erste Szene). Wenn ich den requestAnimationFrame in der Funktion von sceneFour() kommentiere, wechselt er zwischen Szene vier und Szene eins. Aber es animiert nicht. Ich habe mich gefragt, was ich hier falsch mache. Vielen Dank! Dies ist mein Code:requestAnimationFrame und eventListener

<!DOCTYPE html> 
<html> 
<head> 
    <title>Functions in Khan Academy</title> 
    <style> 
     #c{ 
      border: 2px black solid; 
     } 
     canvas { 
      display: block; 
     } 
    </style> 
</head> 
<body> 
<canvas id ="c" width="750" height="750"></canvas> 
<script> 
    var c = document.querySelector("#c"); 
    var ctx = c.getContext("2d"); 
    var currentScene = 1; 
    var radius = 40; 
    var xPos = 600; 
    var yPos = 340; 


    var requestAnimationFrame = window.requestAnimationFrame || 
            window.mozRequestAnimationFrame || 
            window.webkitRequestAnimationFrame || 
            window.msRequestAnimationFrame; 
     //Scene One 
     function sceneOne(){ 
      currentScene = 1; 
      ctx.fillStyle = "rgb(235,247,255)"; 
      ctx.fillRect(0,0,750,750); 
      ctx.fillStyle = "rgb(0, 85, 255)"; 
      ctx.font = "70px Impact"; 
      ctx.fillText("The Story of Winston", 40, 130); 


      var img = new Image(); 
      img.onload = function(){ 
      ctx.drawImage(img, 280, 270, 150, 150); 
     }; 
      img.src = "running.JPG"; 

     }; 

     //Scene Two 
     function sceneTwo() { 
      currentScene = 2; 
      ctx.fillStyle = "rgb(173,239,255)"; 
      ctx.fillRect(0,0,750,750); 
      ctx.fillStyle="rgb(7, 14, 145)"; 
      ctx.fillText("Lil Winston is born!", 10, 100); 
     }; 

     //Scee Three 
     function sceneThree() { 
      currentScene = 3; 
      ctx.fillStyle = "rgb(173,239,255)"; 
      ctx.fillRect(0,0,750,750); 
      ctx.fillStyle = "rgb(7, 14, 145)"; 
      ctx.fillText("Winston grows up!", 10, 100); 
     }; 

     //animated scene four 

     function sceneFour(){ 
      currentScene = 4; 
      //background 
      ctx.fillStyle = "rgb(194,255,222)"; 
      ctx.fillRect(0,0,750,750); 

      //face 
      ctx.fillStyle ="rgb(255, 255, 0)"; 
      ctx.beginPath(); 
      ctx.arc(xPos, yPos, radius, 0, 2*Math.PI); 
      ctx.fill(); 

      //left eye 
      ctx.fillStyle = "rgb(0, 0, 0)"; 
      ctx.beginPath(); 
      ctx.arc(xPos-20, yPos-20, radius-35, 0, 2*Math.PI); 
      ctx.fill(); 

      //right eye 
      ctx.fillStyle = "rgb(0, 0, 0)"; 
      ctx.beginPath(); 
      ctx.arc(xPos+20, yPos-20, radius - 35, 0, 2*Math.PI); 
      ctx.fill(); 

      //mouth 
      ctx.fillStyle = "rgb(255, 0, 0)"; 
      ctx.beginPath(); 
      ctx.arc(xPos, yPos+10, radius-25, 0, 2*Math.PI); 
      ctx.fill(); 

      //stick 
      ctx.beginPath(); 
      ctx.moveTo(xPos, yPos+40); 
      ctx.lineTo(xPos, yPos+150); 
      ctx.stroke(); 

      //left hand 
      ctx.moveTo(xPos, yPos+40); 
      ctx.lineTo(xPos-40, yPos+80); 
      ctx.stroke(); 

      //right hand 
      ctx.moveTo(xPos, yPos+40); 
      ctx.lineTo(xPos+40, yPos+80); 
      ctx.stroke(); 

      //left leg 
      ctx.moveTo(xPos, yPos+150); 
      ctx.lineTo(xPos-50, yPos+180); 
      ctx.stroke(); 

      //right leg 
      ctx.moveTo(xPos, yPos+150); 
      ctx.lineTo(xPos+50, yPos+180); 
      ctx.stroke(); 


      yPos = yPos -0.5; 

      if(yPos === 306){ 
       yPos =340; 
      }; 

      //requestAnimationFrame(sceneFour);  
     }; 

     c.addEventListener("click", function(){ 
     switch(currentScene) { 
     case 1: 
      sceneTwo(); 
      break; 
     case 2: 
      sceneThree(); 
      break; 
     case 3: 
      sceneFour(); 
      break; 
     case 4: 
     sceneOne(); 
     break; 
    } 
});  
     sceneOne(); 


</script> 
</body> 
</html>

Quelle

2017-04-11 abidishajia

Sie müssen irgendwie 'wissen lassen sceneFour' Funktion es mehr ist nicht erforderlich, um die Animation zu laufen - leider eingestellten' currentScene' innerhalb dieser Funktion, so dass Sie nicht, dass –

Erstens, entfernen Sie die currentScene = n aus allen Szene * Funktionen

Änderung sceneFour wie folgt

function sceneFour() { 
    //... removed for brevity 
    if (currentScene == 4) { 
     requestAnimationFrame(sceneFour); 
    } else { 
     sceneOne(); 
    } 
}

Haben es auf diese Weise zu tun, sonst können Sie am Ende mit einem letzten Frame von sceneFour clobbering statische Szene 1

ändern Sie den Click-Handler wie folgt

c.addEventListener("click", function(){ 
    currentScene = currentScene % 4 + 1; 
    switch(currentScene) { 
    case 1: 
     //sceneOne(); 
     break; 
    case 2: 
     sceneTwo(); 
     break; 
    case 3: 
     sceneThree(); 
     break; 
    case 4: 
     sceneFour(); 
     break; 
    } 
});

Quelle

2017-04-11 03:46:42

verwenden Es funktioniert nicht. Die Animation in der vierten Szene funktioniert nicht. – abidishajia

wirklich? irgendwelche Fehler in der Developer Tools-Konsole? –

Sorry, hatte einige Logik falsch –

requestAnimationFrame und eventListener

Antwort

Verwandte Themen