Animated Image with Javascript

Question

Is there a way to create a gif like image with javascript based on some png or jpg?

Just a simple code that change one image for another, creating the impression of a animation, just like a gif.

The idea is to use for generating a banner, so ill upload the pictures (thats done) and i need a code for this animation.

Answer 1

Stackoverflow used this technique for its unicorn animations last april fools day. I preserved the animations on my website. The animation code is my own - I didn't look at how stackoverflow was doing it.

The concept is to create a sprite, and then change the background position on an interval.

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>

Edit: If you don't want to create a sprite, here's an alternate technique you can use. Put all of your animation frame images in a div and hide all but the first one. In your setInterval function, change which image is diplayed:

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>

Answer 2

You can use setInterval or setTimeout to call a function which would replace the source of an image with another. Giving it an animated look.

The problem in this case is that, if the images do not pre-exist on the page, they will flicker. Since the browser will have to load them in just like any other image. So you would have to preload your images.

A better solution may be to use a spritemap. This means that you would have all of the different steps of the animation in one image (so no flicker). You would then use the CSS background-position (again, within a setInterval or setTimeout function) to change the position of the image.