Question

我想要创建一个我需要动画的游戏：首先应该在5秒后绘制一个矩形，在5秒后绘制第二个矩形，在5个之后绘制第三个矩形，在5个之后绘制第四个，在4个之后绘制6-10个，3s后10-15个反应，2s后15-20个反应，1秒后反射20-25个反应。矩形来自上方，应该以一个名为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

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

requestAnimationFrame循环将每隔16ms触发一次，并给出一个非常精确的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;
}

使你的矩形＆＃34;时间意识到＆＃34;您可以为每个矩形创建一个javascript对象，该对象定义了在所需的时间间隔绘制该矩形所需的所有内容。然后使用此javascript对象在所需的时间间隔后在所需位置绘制矩形。

矩形对象属性的示例

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

以下是示例代码和演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你有关于CSS动画吗？它可以非常方便，并且具有比javascript更好的性能。

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

对此的Bassic 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/

定时矩形动画javascript

2 个答案: