HTML画布-使动画一次发生一个，而不是同时发生多个

HTML Canvas - Make animations happen one at a time, rather than multiple at the same time

本文关键字：一个 一次 HTML 画布 动画      更新时间：2023-09-26

我有一个函数，可以按"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完全旋转。

然后偏移已完成的第一个数组元素，并开始为新的第一个元素设置动画。

相关文章：