Форумы портала PHP.SU :: Версия для печати

16. Bio man - 04 Июля, 2012 - 15:57:36 - перейти к сообщению

А проиграть по клику есть?

17. DeepVarvar - 04 Июля, 2012 - 16:04:32 - перейти к сообщению

Я не помню - виндовоза в глаза не видел уже года два..

18. IllusionMH - 04 Июля, 2012 - 16:12:26 - перейти к сообщению

Bio man, как крайний вариант, можно на сервере(или где-еще) делать превьюхи, а потом при наведении подменять src, (предварительно подгрузив в фоне) и тогда начнется проигрывание

upd. Возможно превьюху первого кадра можно будет сделать через canvas (вечером попытаюсь глянуть), но это не поможет со старыми браузерами.

19. Zuldek - 04 Июля, 2012 - 16:15:22 - перейти к сообщению

DeepVarvar пишет:

проиграть по наведению.
Все это вшивается в гифку и вуаля - никакого js не нужно.

Это делается средствами JS. на выходе imageReady выдает html c готовым js-кодом и включаемым gif-файлом.
(Замечу, что это не означает, что нельзя включить работающий Js-код в файл изображения Подмигивание

)
Проигрывание 1 раз или более, - это да, указывается в самом файле средствами формата.

20. Bio man - 04 Июля, 2012 - 16:22:21 - перейти к сообщению

в фотошопе есть имадж реди?

21. Zuldek - 04 Июля, 2012 - 16:27:44 - перейти к сообщению

Bio man пишет:

в фотошопе есть имейдж реди?

смотря в какой версии в CS 2 он отдельно, а в CS5 вроде уже весь функционал в один фотошоп встроен.

22. Bio man - 04 Июля, 2012 - 19:13:51 - перейти к сообщению

Страница загружается, все гифки подгружаются, анимация не циклическая. Нажимаю и появляется уже отработанная гифка! как сделать, что бы при нажатии гифка опять проигрывалась?

23. DeepVarvar - 04 Июля, 2012 - 20:07:34 - перейти к сообщению

А в ImageReady (или где там теперь) все правильно сделано? Может там гдето какую хитрую галочку надо проставить или еще что?

24. Bio man - 04 Июля, 2012 - 20:27:24 - перейти к сообщению

DeepVarvar
я не через ImageReady, просто нативный JS написаный на коленке для теста. Установлю прогу посмотрю, но может все таки как то руками можно сделать?

25. DlTA - 04 Июля, 2012 - 20:36:50 - перейти к сообщению

таки через задницу идет решение

как было упомянуто выше, готовится превьюха можно даже jpg и анимированная гифка в которой задано количество повторений 1
и при наведении/клике средствами js/css производить подмену
проблема может возникнуть в обратной подмене, для подготовки ко второму клику,
но если все гифки стандартизировать, так чтоб знать их длительность (хотяб максимальную) то в принцыпе проблем больше быть не должно

лучше конечно подмену производить средствами JS, чтоб потом делать обратное преобразование.

26. Bio man - 04 Июля, 2012 - 22:17:49 - перейти к сообщению

DlTA пишет:

таки через задницу идет решение

а с превьюхами значит не через задницу, да?
Нужно загрузить ВСЕ гифки (в скрытых полях), что бы не было задержки от загрузки картинок. Затем при каждом наведении/клике отображать и проигрывать определенную гифку. Хрен с ним со временем, где то 1 сек будет.
Может все таки есть решение?

27. armancho7777777 - 05 Июля, 2012 - 03:14:30 - перейти к сообщению

Bio man, а если анимацию реализовать путём использования спрайта из кадров гифки,
контейнера из div-а с фиксированной шириной по размеру одного кадра
и функции setInterval(), меняя background-position контейнера покадрово.
А останавливать анимацию с помощью clearInterval().

На пример:

CODE (javascript):
скопировать код в буфер обмена

 
var setAnimate, flag = 0;
 
function my_animat()
{
      var animate_conteiner = $('#animate-conteiner'),
          t = 0, // Позиция фона по вертикали
          H = 128, // Высота кадра и самого контейнера
          sprH = 3840, // Высота спрайта
          speed = 25; // Скорость анимации (40 кадров в секунду)
 
          if(flag == 0) 
          {
                  flag = 1;
                  
                  setAnimate = setInterval(function(){
                           
                         t += H;
                         if(t == sprH) t = 0;
                         animate_conteiner.css({'background-position':'0 -'+t+'px'});
  
                  }, speed); 
          }
}  
 
 
function stop_animat()
{
    if(flag == 1)
    {
        flag = 0;
        clearInterval(setAnimate);
    }
}
 
 
$(function(){
 
        my_animat();
        
        
        // Запуск анимации
        $('#btn-start').click(function(e) {
                my_animat();
        });
        
        
        // Остантовка анимации
        $('#btn-stop').click(function(e) {
                stop_animat();
        });
 
});
 

CODE (css):
скопировать код в буфер обмена

 
#animate-conteiner {
        width:128px;
        height:128px;
        background:url(sprite.gif) 0 0 no-repeat;
        }
 