HTML Canvas - 使动画一次发生一个,而不是同时发生多个
HTML Canvas - Make animations happen one at a time, rather than multiple at the same time
我有一个函数,可以根据 "totalAngle" 参数指定的量来动画图像转动。该函数使用 requestAnimFrame 调用自身,直到动画完成。
function clockwise(imageObj, canvas, context, angleTurned, totalAngle) {
// only repeat if the angle turned is less than the total angle to be turned
if (angleTurned < totalAngle)
{
// turn
context.rotate(totalAngle / 180);
// update the angle
angleTurned += totalAngle / 180;
// clear the previous image
context.clearRect(0, 0, canvas.width, canvas.height);
// draw the new image
context.drawImage(imageObj, -imageWidth / 2, -imageHeight / 2, imageWidth, imageHeight);
// request new frame
requestAnimFrame(function() {
clockwise(imageObj, canvas, context, angleTurned, totalAngle);
});
}
}
如果我在别处多次调用该函数,动画会混合在一起,而不是在下一个开始之前完成第一个。如何让它在下一个呼叫开始之前完成第一个呼叫?
创建一个数组并将对象推入数组的末尾。
每个对象都包含 imageObj、angleTurned 和 totalAngle 的属性。
让您的 requestAnimationFrame 循环只为数组中的第一个对象设置动画,直到第一个 imageObj 完全转动。
然后移出已完成的第一个数组元素并开始为新的第一个元素设置动画。
我有一个函数,可以根据 "totalAngle" 参数指定的量来动画图像转动。该函数使用 requestAnimFrame 调用自身,直到动画完成。
function clockwise(imageObj, canvas, context, angleTurned, totalAngle) {
// only repeat if the angle turned is less than the total angle to be turned
if (angleTurned < totalAngle)
{
// turn
context.rotate(totalAngle / 180);
// update the angle
angleTurned += totalAngle / 180;
// clear the previous image
context.clearRect(0, 0, canvas.width, canvas.height);
// draw the new image
context.drawImage(imageObj, -imageWidth / 2, -imageHeight / 2, imageWidth, imageHeight);
// request new frame
requestAnimFrame(function() {
clockwise(imageObj, canvas, context, angleTurned, totalAngle);
});
}
}
如果我在别处多次调用该函数,动画会混合在一起,而不是在下一个开始之前完成第一个。如何让它在下一个呼叫开始之前完成第一个呼叫?
创建一个数组并将对象推入数组的末尾。
每个对象都包含 imageObj、angleTurned 和 totalAngle 的属性。
让您的 requestAnimationFrame 循环只为数组中的第一个对象设置动画,直到第一个 imageObj 完全转动。
然后移出已完成的第一个数组元素并开始为新的第一个元素设置动画。