前端实现序列帧动画的几种常见方法

<div class="sprite-animation"></div>

.sprite-animation {
    width: 100px;
    height: 100px;
    background: url('sprite.png') no-repeat;
    animation: play 1s steps(10) infinite;
}
@keyframes play {
    100% { background-position: -1000px 0; }
}

<img id="animation" src="frame1.png" width="100" height="100">

const frames = ['frame1.png', 'frame2.png', 'frame3.png', 'frame4.png'];
let currentFrame = 0;
const imgElement = document.getElementById('animation');
setInterval(() => {
    currentFrame = (currentFrame + 1) % frames.length;
    imgElement.src = frames[currentFrame];
}, 100); // 每100毫秒切换一帧

<canvas id="animationCanvas" width="500" height="500"></canvas>

const canvas = document.getElementById('animationCanvas');
const ctx = canvas.getContext('2d');

const frames = [];
const frameCount = 10; // 假设有10帧
for (let i = 1; i <= frameCount; i++) {
    const img = new Image();
    img.src = `frame${i}.png`;
    frames.push(img);
}

let currentFrame = 0;
function drawFrame() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除上一帧
    ctx.drawImage(frames[currentFrame], 0, 0);
    currentFrame = (currentFrame + 1) % frames.length;
    requestAnimationFrame(drawFrame);
}
requestAnimationFrame(drawFrame);

<svg width="100" height="100">
    <image xlink:href="frame1.svg" rel="external nofollow"  width="100" height="100">
        <animate attributeName="xlink:href"
                 values="frame1.svg;frame2.svg;frame3.svg;frame4.svg"
                 dur="1s" repeatCount="indefinite"/>
    </image>
</svg>

<canvas id="webglCanvas" width="500" height="500"></canvas>

const canvas = document.getElementById('webglCanvas');
const gl = canvas.getContext('webgl');

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
// 加载纹理图片代码略

function render() {
    gl.clear(gl.COLOR_BUFFER_BIT);
    // 绘制当前帧代码略
    requestAnimationFrame(render);
}
requestAnimationFrame(render);