Javascript 优化PNG图像序列动画

我有一个形成动画的PNG序列，我使用此函数播放：

HTML:

问题是，为了使动画以“60 FPS”的速度运行，我在setInterval中设置了30毫秒，并且总是提示获取图像

---

因此，我的问题是，如何缓存该动画，或者找到另一种优化方法如果需要以60 FPS的速度运行动画，那么最好切换到动画GIF（也支持透明度）。逐帧播放的问题是每个单独的PNG“帧”的加载时间极不可预测，因此将它们组合成GIF将允许您一次预加载整个“视频”，然后只播放它。这是迄今为止最简单的选择，因为您不需要担心缓存每个帧

如果GIF不是一个选项，那么您将需要预先加载所有帧（可以是放置在

中的脚本中，也可以是其他格式），以便它们都被缓存，并且

元素不需要浪费时间逐个加载它们。一旦预加载，回放JavaScript函数将以与现在相同的方式翻转帧

希望有帮助

<script>
    $(document).ready(function () {
        playAnimation("firstAnimation", 58); // 58 images in one sequence
    });
</script>

<img id="firstAnimation" directoryimage='../myFirstAnimation/' />

var animation_list = [];

    function playAnimation(elementID, limitCount, count = 0) {
        var directoryimage = $(`#${elementID}`).attr('directoryimage');

        if (animation_list.find(x => x.name == $(`#${elementID}`).attr('id')) == undefined) {
            animation_list.push({
                name: $(`#${elementID}`).attr('id'), animation: setInterval(function () {
                    count++;
                    $(`#${elementID}`).attr('src', directoryimage + count + ".png");

                    if (count == limitCount) {
                        count = 0;
                    }
                }, 30)
            });
        }
    }