requestAnimationFrame 和 eventListener

Question

我正在尝试制作一本图鉴（基本）。在我添加动画场景之前它工作正常。我使用 requestAnimationFrame 添加了动画场景。虽然它有动画，但它不会在场景四（动画场景）和场景一（第一个场景）之间切换。当我在 sceneFour() 的函数中评论 requestAnimationFrame 时，它会在场景四和场景一之间切换。但它没有动画。我想知道我在这里做错了什么。谢谢！这是我的代码：

<!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>

Answer 1

首先，从所有场景*函数中删除currentScene = n

将sceneFour改成如下

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

必须这样做，否则你会得到 sceneFour 的最后一帧破坏静态场景 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;
    }
});

requestAnimationFrame 和 eventListener

requestAnimationFrame and eventListener

javascript

html5-canvas

requestanimationframe