如何用Javascript做动画？

Question

大家好，

我的作业要求我使用JavaScript绘制面部，然后按按钮更改画布上的面部。它还要求我在人脸之间做动画。我环顾四周，注意到我需要使用requestAnimationFrame但不知道该怎么做。另外，我怎么做这样的代码不乱？先谢谢你们。

        //Neutral/Smiling Face
        context.beginPath();
            context.fillStyle = "rgb(255,255,0)" //Drawing the face in yellow colour
            context.lineWidth = 3;
            context.arc(300,300,200,0,Math.PI*4,true);
            context.fill();
        context.stroke();
        //Left Eyebrow
        context.save();
        context.translate(240,180);
        context.rotate(20*Math.PI/180);
        context.beginPath();
            context.fillStyle = "rgb(0,0,0)";
            context.rect(-45,-8,90,16);
            context.fill();
            context.restore();
        context.stroke();
        //Right Eyebrow
        context.save();
        context.translate(360,180)
        context.rotate(-20*Math.PI/180);
        context.beginPath();
            context.fillStyle = "rgb(0,0,0)";
            context.rect(-45,-8,90,16);
            context.fill();
            context.restore();
        context.stroke();
        //Black Pupils of the Eyes
        context.beginPath();
            context.fillStyle = "rgb(0,0,0)";
            context.moveTo(255,250); //LeftEye
            context.arc(220,250,40,0,Math.PI*4,true);
            context.moveTo(415,250);//RightEye
            context.arc(380,250,40,0,Math.PI*4,true);
            context.fill();
        context.stroke();
        //White Inner Eyes
        context.beginPath();
            context.fillStyle = "rgb(255,255,255)";
                context.moveTo(240,250); //LeftPupil
                context.arc(220,250,15,0,Math.PI*4,true);
                context.moveTo(400,250);//RightPupil
                context.arc(380,250,15,0,Math.PI*4,true);
            context.fill();
        context.stroke();
        //Nose
        context.beginPath();
        context.fillStyle = "rgb(0,0,0)";
            context.moveTo(300,275);
            context.lineTo(275,325);
            context.lineTo(325,325);
        context.fill();
        context.closePath();
        context.stroke();
        //Mouth
        context.beginPath();
            context.fillStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.moveTo(300,350);
            context.arc(300,350,100,0,Math.PI,false);
            context.fill();
        context.stroke();


        function sadFace() {
        //Drawing the sad face
        context.beginPath();
            context.fillStyle = "rgb(255,255,0)" //Drawing the face in yellow colour
            context.lineWidth = 3;
            context.arc(300,300,200,0,Math.PI*4,true);
            context.fill();
        context.stroke();
        //Left Eyebrow
        context.save();
        context.translate(200,180);
        context.rotate(-20*Math.PI/180);
        context.beginPath();
            context.fillStyle = "rgb(0,0,0)";
            context.rect(-45,-8,90,16);
            context.fill();
            context.restore();
        context.stroke();
        //Right Eyebrow
        context.save();
        context.translate(400,180)
        context.rotate(20*Math.PI/180);
        context.beginPath();
            context.fillStyle = "rgb(0,0,0)";
            context.rect(-45,-8,90,16);
            context.fill();
            context.restore();
        context.stroke();
        //Black Pupils of the Eyes
        context.beginPath();
            context.fillStyle = "rgb(0,0,0)";
            context.moveTo(255,250); //LeftEye
            context.arc(220,250,40,0,Math.PI*4,true);
            context.moveTo(415,250);//RightEye
            context.arc(380,250,40,0,Math.PI*4,true);
            context.fill();
        context.stroke();
        //White Inner Eyes
        context.beginPath();
            context.fillStyle = "rgb(255,255,255)";
            context.moveTo(240,250); //LeftPupil
            context.arc(220,250,15,0,Math.PI*4,true);
            context.moveTo(400,250);//RightPupil
            context.arc(380,250,15,0,Math.PI*4,true);
            context.fill();
        context.stroke();
        //Nose
        context.beginPath();
        context.fillStyle = "rgb(0,0,0)";
            context.moveTo(300,275);
            context.lineTo(275,325);
            context.lineTo(325,325);
        context.fill();
        context.closePath();
        context.stroke();
        //Mouth
        context.beginPath();
            context.fillStyle = "rgb(0,0,0)";
            context.lineWidth = 1;
            context.moveTo(305,427);
            context.arc(305,427,80,0,Math.PI,true);
            context.fill();
        context.stroke();
        }


        var angryButton = document.getElementById("angryFace");
        var sadButton = document.getElementById("sadFace");
        var surprisedButton = document.getElementById("surprisedFace");
        var neutralButton = document.getElementById("neutralFace");

        sadButton.addEventListener("click", sadFace);
        angryButton.addEventListener("click", angryFace);
        surprisedButton.addEventListener("click", surprisedFace);
        neutralButton.addEventListener("click", neutralFace);