Анимированное изображение с Javascript - PullRequest
Новая
       38

Анимированное изображение с Javascript

5 голосов
/ 28 февраля 2012

Есть ли способ создать изображение, похожее на gif, с использованием javascript на основе png или jpg?

Просто простой код, который меняет одно изображение на другое, создавая впечатление анимации, как рисунок.

Идея состоит в том, чтобы использовать для создания баннера, поэтому я загружаю фотографии (это сделано), и мне нужен код для этой анимации.

Ответы [ 2 ]

21 голосов
/ 28 февраля 2012

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/

2 голосов
/ 28 февраля 2012

Вы можете использовать setInterval или setTimeout для вызова функции, которая заменит источник изображения другим.Придание ему анимированного вида.

Проблема в этом случае заключается в том, что, если изображения не существуют на странице, они будут мерцать.Так как браузер должен будет загружать их так же, как любое другое изображение.Таким образом, вам придется предварительно загрузить свои изображения .

Лучшим решением может быть использование spritemap .Это означает, что у вас были бы все различные шаги анимации в одном изображении (поэтому без мерцания).Затем вы можете использовать CSS background-position (опять же, внутри функции setInterval или setTimeout), чтобы изменить положение изображения.

...