javascript - 使用 Javascript 的动画图像

Question

有没有一种方法可以使用基于某些 png 或 jpg 的 javascript 创建类似 gif 的图像？

只是一个简单的代码，可以将一张图片换成另一张图片，创建动画效果，就像 gif 一样。

我的想法是用于生成横幅，所以我上传图片(完成)，我需要这个动画的代码。

Answer 1

去年愚人节，Stackoverflow 将这种技术用于其独 Angular 兽动画。我保留了动画 on my website .动画代码是我自己的——我没有看 stackoverflow 是怎么做的。

概念是创建一个 Sprite ，然后在一个时间间隔上改变背景位置。

const frameHeight = 102;
const frames = 15;
const div = document.getElementById("animation");
let frame = 0;
setInterval(function () {
    const frameOffset = (++frame % frames) * -frameHeight;
    div.style.backgroundPosition = "0px " + frameOffset + "px";
}, 100);

#animation { 
    background-image: url(https://jumpingfishes.com/dancingpurpleunicorns/charging.png);
    background-repeat: no-repeat; 
    height: 102px; 
    width: 140px; 
}

<div id="animation"></div>

编辑:如果您不想创建 Sprite ，可以使用以下替代技术。将所有动画帧图像放在一个 div 中，并隐藏除第一个以外的所有图像。在您的 setInterval 函数中，更改显示的图像:

const frames = document.getElementById("animation").children;
const frameCount = frames.length;
let i = 0;
setInterval(function () { 
    frames[i % frameCount].style.display = "none";
    frames[++i % frameCount].style.display = "block";
}, 100);

#animation img {
    display: none;
}
#animation img:first-child {
    display: block;
}

<div id="animation">
    <img src="https://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
    <img src="https://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
    <img src="https://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
    <img src="https://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
    <img src="https://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
    <img src="https://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
    <img src="https://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
    <img src="https://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
    <img src="https://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
    <img src="https://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
    <img src="https://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
    <img src="https://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
    <img src="https://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
    <img src="https://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
    <img src="https://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>