如何使用requestAnimationFrame在一个循环中动画多个方格 [英] How to use requestAnimationFrame to animate multiple squares in a loop

问题描述

我使用HTML画布绘制多个正方形。我有2个功能：1）绘制一个正方形和2）在循环内绘制多个方格。

I am using HTML canvas to draw multiple squares. I have 2 functions: 1) draw a square and 2) draw multiple squares inside a loop.

现在，我想使用 requestAnimationFrame 来动画处理这些方块，一次绘制一个方形。我如何实现这一点。这是 jsFiddle

Now I want to animate these squares using requestAnimationFrame to draw these square one at a time. How can I achieve this. Here is a jsFiddle

var canvas = document.getElementById('canvas'),
       ctx = canvas.getContext('2d');

    function rect(x, y, w, h) {
      ctx.beginPath();
      ctx.rect(x, y, w, h);
      ctx.stroke();
    }

    function drawRect(number, size) {
      for (var i = 0; i <= number; i++) {
        rect(i * size, i * size, (i * size) * 2, (i * size) * 2);
      }
    }

    drawRect(10, 5);

推荐答案

您可以执行

var numRects = 10;
var size = 5;
var i = 1;                          // which rectangle we're drawing
var delay = 1000/60;                // num miliseconds between frames
var before = new Date().getTime(),  // last draw time in ms
    now;                            // current time in ms

function animateRect() {
  // get the current time to find if we should draw
  now = new Date().getTime();

  // if sufficient time passed since last draw, draw a rect
  if ( now - before > delay && i <= numRects) {
    rect(i * size, i * size, (i * size) * 2, (i * size) * 2);
    i++;
    before = now;
  }

  requestAnimFrame(animateRect);
}

编辑：

如Blindman67指出的， requestAnimFrame 将动画开始时的当前时间戳传递给回调。以下是如何利用它：

As Blindman67 pointed out below, requestAnimFrame passes the current timestamp since the beginning of the animation to the callback. Here's how to take advantage of it:

var numRects = 10;
var size = 5;
var i = 1;                          // which rectangle we're drawing
var delay = 1000/60;                // num miliseconds between frames
var before;                         // last draw time in ms

function animateRect(now) {
    if ( !before ) before = now;
    // if sufficient time passed since last draw, draw a rect   
    if ( now - before > delay && i <= numRects) {
        rect(i * size, i * size, (i * size) * 2, (i * size) * 2);
        i++;
        before = now;
    }

    requestAnimFrame(animateRect);
}

但是，这需要修改OP正在使用的垫片将当前时间戳传递给 setTimeout 中的回调：

However, this would necessitate modifying the shim the OP is using, in order to pass the current timestamp to the callback in setTimeout:

window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function( /* function */ callback, /* DOMElement */ element) {
            window.setTimeout(callback, 1000 / 60, new Date.now());
        };
    })();

这篇关于如何使用requestAnimationFrame在一个循环中动画多个方格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！