如何使用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屋!