Асинхронное воспроизведение нескольких тегов <img> с таким же анимированным GIF

У меня есть много меток <img> на одной странице HTML, некоторые из которых имеют один и тот же анимированный GIF-файл. URL-адрес src динамически задается с помощью JavaScript, но с моим кодом одни и те же символы либо снова воспроизводятся, либо сразу же отображаются следующие символы с последним фреймом.Асинхронное воспроизведение нескольких тегов <img> с таким же анимированным GIF

Идея: Это для арт-проекта. После ввода некоторого текста символы отображаются специальным шрифтом, и некоторый переход выполняется символов на символ (один за другим), который я могу реализовать только с помощью анимированных GIF. Текст разбивается на отдельные символы и <img> теги создаются следующим образом:

<!-- delivered HTML at page load --> 
<img src="initial/f.png"> <!-- I used to PNG here to outline --> 
<img src="initial/o.png"> <!-- the animation is NOT set a first --> 
<img src="initial/o.png">

Когда анимация начинается первый <img> «s URL устанавливается на transition/f.gif. Только после того, как он закончил играть (определяется время) второе изображение установлено и т.д.

<!-- while 2nd animation is running --> 
<img src="transition/f.gif"> <!-- already finished, displays last frame --> 
<img src="transition/o.gif"> <!-- being animated right now --> 
<img src="transition/o.png"> <!-- will be reset to o.gif in next step -->

проблема, которую я не могу решить: После o.gif из примера игрался анимация следующего O Безразлично работайте правильно.

Я попытался определить класс для каждого символа и присвоить изображение как background-image. Как только какое-либо появление символа сыграло какие-либо последующие вхождения одной и той же буквы, на дисплее отобразился последний кадр (конечное состояние) этого GIF.

Я также попытался установить атрибут src непосредственно с помощью JavaScript, но когда вторая буква O установлена так, анимация первой буквы O перезапускается синхронно. Но он должен оставаться на последнем кадре.

Поскольку HTML-страница также должна работать на локальной файловой системе, я думаю, что аргументы, подобные o.gif?random=argument для обхода механизма кэширования, не будут работать или не будут иметь никакого эффекта (возможно, на некоторых компьютерах само тестирование не будет фальсифицировать) ,

источник

2013-05-20 Daniel Böhmer

«специальный шрифт и некоторый переход осуществляется символом на символ (один за другим), который я могу реализовать только с помощью анимированных GIF» - я уверен, что вы можете сделать это, используя что-то еще, например. холст, особенно если это для арт-проекта, и поэтому, вероятно, он не заботится о поддержке браузера. – MMM

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

Ненавижу рекомендовать интернет-скелит в шкафу, но вы считали Flash? Легко учиться, легче анимировать в большинстве GIF-аниматоров, и у вас есть полный контроль над синхронизацией и временем. –

Вам необходимо создать уникальные URL-адреса для изображений, поэтому браузер будет всегда перезагружать буквы вместо использования кешированных. Вы можете достичь этого, например, с помощью небольшого php, который выводит правильный gif для параметра.

<img src="gif_printer.php?letter=o&t=1234567">

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

В заголовках наборов php для ограничения/отключения кеширования и вывода типа gif и просто заливки содержимого изображения в стандартный вывод.

Параметр timestamp и заголовки управления кешем должны быть достаточными для того, чтобы браузер мог перезагрузить evert letter.

Если ваша тестовая среда не реагирует правильно, вы можете попробовать решение htaccess, но для этого вам нужно использовать веб-сервер (и этого уже может быть достаточно для работы предыдущего решения).

Это означает переписать любой url на изображения/[a-z] .gif в изображения/[a-z] .gif, поэтому просто удалите дополнительный шум, кроме первой буквы и расширения.

источник

2013-05-20 15:03:29 kms

Мне уже нужен HTTP-сервер для использования скрипта PHP [или любого другого скриптового языка]. Какую пользу вы ожидаете от использования правила перезаписи в файле .htaccess? –

Ну, я протестировал ссылку «o.gif? Pos = LETTER_INDEX' с локальными файлами и, на удивление, это работает. Я так понимаю, он также будет работать на HTTP, потому что браузер не может знать, что он на самом деле тот же файл. Поскольку, очевидно, можно использовать синтаксис '?' С любым файлом, нет необходимости в HTTP-сервере (для локальных файлов) или языке сценариев (для веб-обслуживания). Конечно, было бы намного лучше решить настоящую проблему, чем использовать «разные» файлы. Поэтому я буду держать это открытым некоторое время и искать другие ответы. –

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

Рассмотрите возможность использования GIF-файлов, но последовательностей изображений и Javascript.Я бросил вместе грубый инстанциируемый объект Javascript, что делает именно это:

<html> 
    <head> 
     <script> 
      function Animator(target, frames, delay) 
      { 
       var _this = this; 
       // array of frames (image objects) 
       var f = []; 
       // a reference to the object where our frames will appear 
       var t = document.getElementById(target); 
       // the interval variable. Used to stop and start 
       var t_loop; 
       // create a new image element and remember it 
       var img_el = document.createElement("img"); 
       // current frame 
       var c_frame = 0; 

       t.innerHTML = ""; 
       t.appendChild(img_el); 

       var i, img; 

       // preload immediately 
       for(i = 0; i < frames.length; i++) 
       { 
        img = new Image(); 
        img.src = frames[i]; 
        f.push(img); 
       } 

       this.play = function() 
       { 
        t_loop = window.setInterval(_this.frame, delay); 
       } 

       this.stop = function() 
       { 
        clearInterval(t_loop); 
       } 

       this.gotoFrame = function(frame) 
       { 
        c_frame = frame; 
        _this.frame(); 
       } 

       this.frame = function() 
       { 
        img_el.src = f[c_frame].src; 

        c_frame++; 

        if(c_frame >= f.length) 
        { 
         c_frame = 0; 
        } 
       } 
      } 

      function loaded() 
      { 
       var quip_frames = [ 
        "http://www.abcteach.com/images/abma_thumb.gif", 
        "http://www.abcteach.com/images/abcu_thumb.gif", 
        "http://www.abcteach.com/images/zbma_thumb.gif", 
        "http://www.abcteach.com/images/zbcu_thumb.gif", 
        "http://www.abcteach.com/images/dnma_thumb.gif", 
        "http://www.abcteach.com/images/dncu_thumb.gif" 
       ]; 

       var anim1 = new Animator("target1", quip_frames, 100); 

       var anim2 = new Animator("target2", quip_frames, 100); 

       var anim3 = new Animator("target3", quip_frames, 100); 

       anim1.play(); 
       window.setTimeout(anim2.play, 200); 
       window.setTimeout(anim3.play, 300); 
      } 
     </script> 
    </head> 
    <body onload="loaded()"> 
     <div id="target1"> 
     </div> 
     <div id="target2"> 
     </div> 
     <div id="target3"> 
     </div> 
    </body> 
</html>

благодаря ABCTeach для изображений

Объект загружает изображения в цикле, сохраняет их в массив, то через простое использование setInterval() свопирует кадры по желаемой скорости. Когда страница загружается, он делает три из этих объектов, каждый из которых указывает на другой DIV, но каждый с одинаковыми кадрами. Затем он говорит каждому играть с другой задержкой (первая сразу, вторая после 200 мс, третья после 300 мс). В вашем случае, если вы хотите сделать один массив для каждой буквы вы бы использовать:

var A = [*array of URLs to images of the letter A*]; 
var B = [*array of URLs to images of the letter B*];  
...

Затем создать новый Animator объект для каждого DIV на странице, отправив ему соответствующее письмо массив:

var letter_so_and_so = new Animator("div_so_and_so", A, 100); 
var letter_this_and_that = new Animator("div_this_and_that", B, 100); 
var another_letter = new Animator("another_div", B, 100);

Наконец, дайте каждому из них либо начало смещения, либо вызовите их метод Animator.gotoFrame(f), чтобы запустить их на разных кадрах (не забудьте указать Animator.play()!).

JSFiddle

Попытка принять что-то вроде этого в ваш код, я думаю, вы найдете, что это творит чудеса.

источник

2013-05-20 21:02:38

Асинхронное воспроизведение нескольких тегов <img> с таким же анимированным GIF

ответ

Смежные вопросы