requestAnimationFrame和eventListener

我正在試圖製作一本插圖書（基本）。它工作正常，直到我添加了動畫場景。我使用requestAnimationFrame添加了動畫場景。雖然它具有動畫效果，但它不會在場景四（動畫場景）和場景一（第一場景）之間切換。當我在sceneFour（）的函數中對requestAnimationFrame註釋時，它將在場景四和場景一之間切換。但它不動畫。我想知道我在這裏做錯了什麼。謝謝！這是我的代碼：requestAnimationFrame和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>

來源

2017-04-11 abidishajia

你需要以某種方式讓'sceneFour'功能知道它不再需要運行動畫 - 不幸的是，你設置'currentScene'該函數內部，所以你不能使用 –

首先，從所有場景中刪除currentScene = n *功能

變化sceneFour如下

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

必須這樣做，否則你可以結束了這種方式與最後一幀的場景四個破壞靜態場景1

更改點擊處理程序如下

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

來源

2017-04-11 03:46:42

它不工作。第四個場景的動畫不起作用。 – abidishajia

真的嗎？開發者工具控制檯中的任何錯誤？ –

對不起，有一些邏輯錯誤 –

requestAnimationFrame和eventListener

回答

相關問題