Нужно создать анимацию с помощью javascript (mimic gif) с помощью jpgs - PullRequest
Новая
       8

Нужно создать анимацию с помощью javascript (mimic gif) с помощью jpgs

1 голос
/ 04 августа 2011

У меня есть куча jpegs из старой флеш-анимации. Они названы от 1000.jpg до 1092.jpg, играя в таком порядке. Я пытался создать .gif анимацию с этими картинками, но gif был просто слишком большим, а качество было ужасным.

Вот почему я пытался использовать jQuery для анимации этих jpegs, чтобы имитировать эту анимацию gif.

Это код, который я нашел здесь в stackoverflow 

$("#logo").click(function() {
var $logo = $(this), src = $logo.attr("src");
var index = src.indexOf('.jpg');
var step = +src.slice(index-4, index);

function frame() {
    step++;
    if(step < 93) {
        var newSrc = src.slice(0, index-4) + step + ".jpg";
        console.log(newSrc);
        $logo.attr('src', newSrc);
        setTimeout(frame, 50);
    }
}

frame();
});

Но это не работает ... время анимации составляло 0,03 секунды каждая, и у меня была картинка как "img id =" logo "src =" images / 1000.jpg "/" (наверняка с <> ) но он не работает или не меняет SRC.

Любая помощь заставит это работать? Спасибо

Редактировать: Пожалуйста, помогите еще раз, так как это сводит меня с ума. Я попробовал спрайт, но это не работает, так как вы можете видеть, как фон перемещается.

Мне действительно нужно подражать этому GIF, это просто простой GIF, состоящий из 93 фотографий. Это просто анимация, где лицо меняется на другое лицо ...

Ответы [ 2 ]

1 голос
/ 04 августа 2011 
/*
You are trying to set the `src` of a `div`. Set the `src` of an `img` instead:

<div>
  <img id="logo" src="mypath/mylittlepony.jpg">
</div>
*/
this doesn't apply anymore since the question was edited...

Теперь этот JSFiddle работает, как вы хотите, по крайней мере, в моем браузере (Firefox 4.0.1).

EDIT
запуск после загрузки: посмотрите на этот JSFiddle
запуск после загрузки и бесконечный цикл: посмотрите на этот финальный JSFiddle
дополнительный трюк: туда-сюда

У вас все еще есть проблема с кэшированием. Анимация плавная, только если все изображения кэшированы. Вы можете предварительно загрузить их, поместив их как 1-px-imgs на свою страницу. 

<img src="http://iflorian.com/test/image/1000.jpg" height="1" width="1" alt="" />
<img src="http://iflorian.com/test/image/1001.jpg" height="1" width="1" alt="" />
<img src="http://iflorian.com/test/image/1002.jpg" height="1" width="1" alt="" />
...
<img src="http://iflorian.com/test/image/1050.jpg" height="1" width="1" alt="" />

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

0 голосов
/ 04 августа 2011

Просто проверьте в консоли ошибок вашего веб-браузера, если Javascript вызывает какую-либо ошибку ... потому что, если какая-либо часть вашего JS вызывает исключение и не запускается, эффект также может завершиться ошибкой.Случалось со мной в отдельных случаях.

...