JQuery GIF Анимации

Question

Я собираюсь использовать jQuery для устранения необходимости использования GIF-файлов для создания довольно простой анимации.

Я хочу, чтобы изображение имело четыре этапа. 1) Ничего не показывает 2) Первая часть изображения 3) Вторая часть изображения 4) Третья часть изображения - Начать сначала

Я подумал, что мне нужно создать этапы изображения, а затем использовать технику «заменить текущее изображение следующим» с помощью jQuery для создания анимации. Это может быть довольно легко с обратными вызовами.

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

Я подумал об этом. Разве глупо не просто использовать GIF? Или это можно сделать с помощью jQuery?

Answer 1

Это намного проще и поддерживает цепную способность:

JQuery:

$(document).ready(function(){
    //rotator - delay, children
    $('#slideshow').rotator(50, 'img');
});

Markup:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="scripts/jquery.rotator.js"></script>

<style type="text/css">
#slideshow {
    position:absolute; //or whatever you need
    display:block;
    top:0px;
    left:0px;
}
#slideshow img {
    position:absolute;
    opacity:0;
}
</style>

<!-- SLIDESHOW -->
<div id="slideshow">
  <img src="images/1.png">
  <img src="images/2.png">
  <img src="images/3.png">
</div>

Plugin:

(function( $ ){
    $.fn.rotator = function(delay, child){
        //set curImage val
        var currImg = 0;
        var currIt = true;
        //set array of images
        var ss = $('#slideshow').children(child);
        var ssize = ss.size();
        setInterval(function() {
            if(currIt){
                $(ss[currImg]).css('opacity','1');
                currIt = !currIt;
            }else if (!currIt){
                $(ss[currImg]).css('opacity','0');
                $(ss[currImg+1]).css('opacity','1');
                currIt = !currIt;
                currImg++;
            }
            //reset
            if(currImg >= ssize){
                currImg = 0;
                $(ss[currImg]).css('opacity','1');
            }
        }, delay);
        return this;
    };
})(jQuery);

Answer 2

Проверьте эту страницу для демонстрации для фоновой анимации с помощью jquery и это для учебника.

Синан.

Answer 3

Можно ли объединить ваши четыре изображения в спрайт (1 реальная графика со всеми четырьмя изображениями и без наложения)? С точки зрения производительности браузер клиента должен загружать только одно изображение вместо того, чтобы делать 4 запроса для каждого из четырех ваших изображений.

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

Что касается переносимости и повторного использования, вы можете просто создать плагин jQuery, чтобы иметь возможность использовать его в нескольких местах.

Answer 4

Если он будет постоянным и не зависит от событий, я бы порекомендовал использовать GIF-файлы.

Если, однако, анимация является реакцией на что-то, происходящее на странице, или если вы хотите, чтобы она запускалась только после загрузки всего, тогда jquery, вероятно, является подходящим способом.

Вы должны просто иметь возможность изменить источник изображения (или смещение положения, если вы используете одно изображение), чтобы изменить изображение. Взгляните на некоторые опции "паузы" в jQuery для задержки изменений между изображениями.

Непроверенный пример (полученный из ответа Саймона по ссылке выше):

function chg1() { $('#myimage').attr('src', ''); }
function chg2() { $('#myimage').attr('src', 'image1src.jpg'); }
function chg3() { $('#myimage').attr('src', 'image2src.jpg'); }
function chg4() { $('#myimage').attr('src', 'image3src.jpg'); }

function StartAnimation() {
    setTimeout(chg1, 2000);  // blank after 2 seconds
    setTimeout(chg2, 4000);  // img 1 after 4 seconds
    setTimeout(chg3, 6000);  // img 2 after 6 seconds
    setTimeout(chg4, 8000);  // img 3 after 8 seconds
    setTimeout(StartAnimation, 8000);  // start again after 8 seconds
}

StartAnimation();  // start it off

Answer 5

Используйте анимированные GIF-изображения - это то, для чего они созданы. Я уверен, что можно собрать решение, используя JQuery, но вы заплатите за это дополнительным временем и сложностью разработки.

Кроме того, вы должны понимать, что, выбирая индивидуальное решение JQuery / CSS, вы решаете тесно связать анимацию со страницей, на которой она находится. Что если кто-то захочет добавить анимацию на другую страницу? Им придется скопировать кучу кода вместо одного GIF-файла. Что если кто-то захочет включить его в электронное письмо или презентацию Power-point? Не может быть сделано ...

Answer 6

Во-первых, вы можете использовать фон из нескольких div, поместив часть изображения, которая вам нужна

css_background-позиция

Затем вы должны показать div, как вам нужно, в зависимости от типа необходимой вам анимации.