js控制gif图播放

<img id="myGif" src="path/to/your/gif.gif" alt="Animated GIF">

function playGif() {
    document.getElementById('myGif').src = 'path/to/your/gif.gif';
}

function pauseGif() {
    // 可以设置为一个静态图片的路径来“暂停”动画
    document.getElementById('myGif').src = 'path/to/a/static/image.png';
}

let frames = []; // 存储 GIF 的所有帧
let currentFrame = 0; // 当前帧索引
let timer;

function loadGif(url) {
    let img = new Image();
    img.onload = function() {
        let canvas = document.createElement('canvas');
        let ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;

        // 分解 GIF 为单帧
        let gif = new SuperGif({ gif: img });
        gif.load(() => {
            for (let i = 0; i < gif.get_length(); i++) {
                frames.push(canvas.toDataURL());
            }
            playGif();
        });
    };
    img.src = url;
}

function playGif() {
    timer = setInterval(() => {
        document.getElementById('myGif').src = frames[currentFrame];
        currentFrame = (currentFrame + 1) % frames.length;
    }, 100); // 根据 GIF 的帧率调整时间间隔
}

function pauseGif() {
    clearInterval(timer);
}