播放序列帧卡顿问题

最近一个需求，通过序列帧播放动画,通过canvas来绘制，直接通过img标签渲染好很多

<template>
    <canvas ref="canvas" width="866" height="699"></canvas>
</template>
  
<script>
export default {
    mounted() {
        this.$nextTick(() => {
            this.startAnimation();
        })
    },
    methods: {
        startAnimation() {
            const canvas = this.$refs.canvas;
            const ctx = canvas.getContext('2d');
            const frames = [];
            for (let i = 1; i < 299; i++) {
                let num = i < 10 ? `00${i}` : i >= 100 ? `${i}` : `0${i}`
                frames.push(require(`@/assets/frames/xlz1.4_00${num}.png`));
            }
            const imageObjects = [];

            let currentFrame = 0;

            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(imageObjects[currentFrame], 0, 0, canvas.width, canvas.height);
                currentFrame = (currentFrame + 1) % frames.length;
                requestAnimationFrame(animate);
            }
            // 使用 Promise.all() 等待所有图片加载完成
            Promise.all(frames.map((frame) => {
                return new Promise((resolve, reject) => {
                    const img = new Image();
                    img.onload = () => {
                        resolve(img);
                    };
                    img.onerror = reject;
                    img.src = frame;
                    imageObjects.push(img);
                });
            })).then(() => {
                animate();
            });
        }
    }
}
</script>

小伙伴们有其他更好的方法，欢迎分享