如何一次为多个事物设置动画？

Question

我正在尝试同时随机设置多个动画，但我做不到！！！

我想像这样把它全部放在一个函数中：

        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var randX = Math.floor(Math.random()*1300);
        var randY = Math.floor(Math.random()*400);
        var randSpX = Math.random()*20;
        var randSpY = Math.random()*20;
        var randNum = Math.floor(Math.random()*3);
        var i = 0;
        var squareX = new Array();
        var squareY = new Array();
        var color = new Array();
        var anim = window.requestAnimationFrame || window.msRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame || window.mozRequestAnimationFrame;

        function square() {
            for (i=0;i<10;i++) {
                randX = Math.floor(Math.random()*1300);
                randY = Math.floor(Math.random()*400);
                randSpX = Math.random()*3;
                randSpY = Math.random()*3;

                squareX[i] = randX;
                squareY[i] = randY;

                context.fillStyle = "#FFF000";
                context.fillRect(squareX[i],squareY[i],20,20);
            }

            randNum = Math.floor(Math.random()*3);

            for (i=0;i<10;1++) {
                spX = Math.random()*3;
                spY = Math.random()*3;

                switch (randNum) {
                    case 0:
                        squareX[i] = squareX[i] + spX;
                        squareY[i] = squareY[i] + spY;
                        break;
                    case 1:
                        squareX[i] = squareX[i] - spX;
                        squareY[i] = squareY[i] - spY;
                        break;
                    case 2:
                        squareX[i] = squareX[i] + spX;
                        squareY[i] = squareY[i] - spY;
                        break;
                    case 3:
                        squareX[i] = squareX[i] - spX;
                        squareY[i] = squareY[i] + spY;
                        break;
                }
            }

            anim(square);
        }

不幸的是，这显示了我的 canvas，仅此而已。

我尝试将 square 函数设为一个对象，运行动画代码来自另一个功能，但它不起作用。

谢谢。

Answer 1

您没有开始动画循环。

你可以这样开始你的动画：

requestAnimationFrame(square);

顺便说一句，你的第二个 for 循环对你的 squareX/squareY 没有影响，因为顶部的 for 循环正在覆盖 squareX/squareY.

这是为解决这两件事而重构的代码：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
ctx.fillStyle='#fff000';

// create 10 square objects with x,y properties
var squares=[];
for(var i=0;i<10;i++){
  squares.push({x:Math.random()*300,y:Math.random()*300,});
}

// start animating
requestAnimationFrame(animate);

// the animation loop
function animate(){

  // request another animation frame
  requestAnimationFrame(animate);

  ctx.clearRect(0,0,cw,ch);

  for(var i=0;i<squares.length;i++){
    var s=squares[i];

    // update this square's x & y by -3 to 3 pixels
    s.x+= Math.random()*6-3;
    s.y+= Math.random()*6-3;

    // draw the square
    ctx.fillRect(s.x,s.y,20,20);   

  }
}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

如何一次为多个事物设置动画？

How do I animate multiple things at once?

javascript

animation

canvas