定时矩形动画javascript

Question

我想创建一个需要动画的游戏：首先应该在 5 秒后绘制一个矩形，在 5 秒后绘制第二个矩形，在 5 后绘制第三个，在 5 后绘制第四个，4s 后绘制 6-10 个矩形, 10-15 3s 后 rect， 15-20 2s 后 rect 和 20-25 1 s 后 rect。矩形来自上方，应该以称为recty 的速度运行到底部。也许这会有所帮助：jsfiddle。

  var x = canvasWidth / 100;
  var y = canvasHeight / 100;
  b = 5000;
     function init() {
    recty = canvasHeight / 100 * 20;
    rectx = (Math.random() *(x * 50)) + (x / 5);
    rectb = (Math.random() * (x * 40)) + x * 20;
    return setInterval(main_loop, 10);


  }


  function draw() {
    rectheight = canvasHeight / 100 * 10;
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    // draw triangles
    ctx.beginPath();
    ctx.moveTo(x * 90, y * 50);
    ctx.lineTo(x * 99, y * 60);
    ctx.lineTo(x * 99, y * 40);
    ctx.closePath();
    ctx.stroke();

  }

  function drawrect() {
    // draw rect
    ctx.beginPath();
    fillStyle = "#000000";
    ctx.rect(rectx, recty, rectb, rectheight);
    ctx.fill();

  }

  function update() {
    recty += 1;
    if (recty > canvasHeight) {
      recty = -rectheight;
      rectx = (Math.random() *(x * 50)) + (x / 5);
      rectb = (Math.random() *(x * 50)) + (x / 5);
      b -=1000;
    }
    if (recty > canvasHeight) {
      recty -= 1;


    }
  }



  function main_loop() {
    draw();
    update();
    collisiondetection();
    drawrect();
  }


  init();
  setInterval ( drawrect, b );

Answer 1

你有没有想过 css 动画？ 它可以非常方便，并且比 javascript 具有更好的性能。

如果您不关心 IE9 及之前的版本，您可以在位置上使用转换，甚至可以延迟。如果你这样做了，你应该通过向每个盒子添加一个类来使用 javascript 启动动画，这将使它成为跨浏览器。

这个的基本 css 模型看起来像这样：

.box{
    width:90px;height:90px;background:red;position:absolute;
    -webkit-animation: mymove 5s; /* Chrome, Safari, Opera */
    animation: mymove 5s;
    animation-delay: 2s; 
    -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
}

然后您可以为特定框添加规则，并否决基本框样式。

.box-1{animation-delay:10s; -webkit-animation-delay: 2s;}

见 jsfiddle：http://jsfiddle.net/eyqtg9wp/

Answer 2

现代浏览器有一个内置计时器：requestAnimationFrame。

requestAnimationFrame 循环大约每 16 毫秒触发一次，并会得到一个非常精确的 currentTime 参数。您使用以下命令开始计时循环：requestAnimationFrame(Timer);。对于您发出的每个 requestAnimationFrame，循环只会执行一次，因此您将 requestAnimationFrame 放入循环本身以保持其运行。

这是一个示例计时循环，它计算自计时循环开始以来经过的时间：

// variable used to calculate elapsed time
var lastTime;

// start the first timing loop
requestAnimationFrame(Timer);

function Timer(time){

    // request another timing loop
    // Note: requestAnimationFrame fires only once,
    //       so you must request another loop inside 
    //       each current loop
    requestAnimationFrame(Timer);

    // if this is the very first loop, initialize `lastTime`
    if(!lastTime){lastTime=time;}

    // calculate elapsed time since the last loop
    var elapsedTime=time-lastTime;
}

要使您的矩形“时间感知”，您可以为每个矩形创建一个 javascript 对象，该对象定义了在所需时间间隔绘制该矩形所需的所有内容。然后使用这个 javascript 对象在所需时间间隔后在所需位置绘制矩形。

矩形对象属性示例

• 矩形的位置：x,y
• 下次更新矩形位置之前等待的时间间隔：interval
• 在更新期间移动矩形的距离：moveByX, moveByY

这是示例代码和演示：

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

var rects=[]
rects.push({x:10,y:10,moveByX:5,interval:500,nextMoveTime:0});
rects.push({x:10,y:50,moveByX:5,interval:1000,nextMoveTime:0});
rects.push({x:10,y:110,moveByX:5,interval:2000,nextMoveTime:0});

var isFirstLoop=true;

// start the timing loop
requestAnimationFrame(Timer);

function Timer(currentTime){

  // request another timing loop
  // Note: requestAnimationFrame fires only once,
  //       so you must request another loop inside 
  //       each current loop
  requestAnimationFrame(Timer);

  if(isFirstLoop){
    isFirstLoop=false;
    for(var i=0;i<rects.length;i++){
      rects[i].nextMoveTime=time+rects[i].interval;
    }
  }

  ctx.clearRect(0,0,cw,ch);
  for(var i=0;i<rects.length;i++){
    drawRect(rects[i],currentTime);
  }

}

function drawRect(r,time){
  if(time>r.nextMoveTime){
    r.x+=r.moveByX;
    r.nextMoveTime=parseInt(time+r.interval);
  }
  ctx.strokeRect(r.x,r.y,110,15);
  ctx.fillText('I move every '+r.interval+'ms',r.x+5,r.y+10);
}

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

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