Question

有没有办法用基于某些png或jpg的javascript创建一个像gif的图像？

只是一个简单的代码，可以将一个图像更改为另一个图像，创建一个动画的印象，就像一个gif。

这个想法是用来生成一个横幅，所以不好上传图片（那就完成了），我需要一个代码来制作这个动画。

Answer 1

Stackoverflow在愚人节那天使用这种技术进行独角兽动画。我保留了动画on my website。动画代码是我自己的 - 我没有看看stackoverflow是如何做的。

概念是创建一个精灵，然后在一个间隔内改变背景位置。

sprite http://jumpingfishes.com/dancingpurpleunicorns/charging_clip.png

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

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

工作演示： http://jsfiddle.net/twTab/

编辑：如果您不想创建精灵，可以使用以下替代技术。将所有动画帧图像放在div中，并隐藏除第一个之外的所有图像。在setInterval功能中，将第一张图片移至列表末尾：

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

<div id="animation">
    <img src="charging01.png />
    <img src="charging02.png />
    <img src="charging03.png />
    ...
</div>

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

工作演示： http://jsfiddle.net/twTab/3/

Answer 2

您可以使用setInterval或setTimeout来调用可以替换另一个图像来源的函数。给它一个动画外观。

在这种情况下的问题是，如果图像没有预先存在于页面上，它们将闪烁。由于浏览器必须像其他任何图像一样加载它们。所以你必须preload your images。

更好的解决方案可能是使用spritemap。这意味着您可以在一个图像中拥有动画的所有不同步骤（因此不会闪烁）。然后，您将使用CSS background-position（再次在setInterval或setTimeout函数中）更改图像的位置。

用Javascript动画图像

2 个答案: