用Javascript动画图像

Question

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

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

这个想法是用来生成一个横幅,所以不好上传图片(已完成),我需要一个代码用于这个动画.

Answer 1

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

这个概念是创建一个精灵,然后在一个间隔上改变背景位置.

精灵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/