jQuery для начинающих. Часть 5. Эффекты

Продолжаем изучать jQuery. Переходим к эффектам…

Материалы данной статьи включены в учебник «jQuery для начинающих». Учебник распространяется бесплатно, и сопровождается интерактивными примерами.

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

Animate

Запомните – все эффекты анимации в jQuery крутятся вокруг функции animate – данная функция берет один или несколько CSS свойств элемента и изменяет их исходного до конечного за N-ое количество итераций (количество итераций зависит от указанного времени, но не реже одной итерации в 13ms (если я правильно накопал это значение)).

Функция animate понимает следующие параметры:

  • params – описание CSS свойств элемента, до которых будет происходить анимация (т.е. есть у нас div с высотой 100px – говорим animate({height:200}) – и высота плавно изменяется до 200px)
  • duration – скорость анимации – указываем в миллисекундах, или используя ключевые слова “fast” = 200ms, “normal” = 400ms или “slow” = 600ms
  • easing – указываем какую функцию будем использовать для наращивания значений, на выбор “linear” или “swing” (хотите больше см. Easing Plugin)
  • callback – функция, которая будет вызвана после окончания анимации

Альтернативный способ инициализации:

  • params – описание CSS свойств элемента, до которых будет происходить анимация
  • options– объект настроек:
    • duration – см. выше
    • easing – см. выше
    • complete – аналогичен ранее описанному callback-параметру
    • step – еще одна callback функция – отвечает за пошаговое изменение параметров – пример ниже
    • queue – флаг очереди, если выставить в false – то данная анимация будет игнорировать очередь и запустится сразу

Если заглянуть в руководство пользователя – то в разделе эффектов можно найти еще несколько вспомогательных функций:

  • show( ) – отображает выбранные элементы
  • hide( ) – скрывает выбранные элементы
  • toggle( ) – переключатель между show/hide
  • slideDown( speed, callback ) – выдвигает объект(ы) вниз – увеличивает высоту от 0 до 100%
  • slideUp( speed, callback ) – задвигает объект(ы) вверх – уменьшает высоту от 100% до 0
  • slideToggle( speed, callback ) – переключатель между slideDown/slideUp
  • fadeIn( speed, callback ) – отображает выбранные элементы – изменяет прозрачность элементов
  • fadeOut( speed, callback ) – скрывает выбранные элементы – изменяет прозрачность элементов
  • fadeTo( speed, opacity, callback )- изменяет прозрачность элементов до указанного значения

Самые простые методы hide и show обходятся без функции animate, т.к. манипулируют лишь атрибутом display (демо):

1
2
3
4
5
6
7
8
// вызов метода
$('#my').hide();
 
// аналогичен
$('#my').css({display:"none"});
 
// но если задать скорость анимации либо callback функцию,
// то будут изменятся значения height и width

Как я и говорил ранее – остальные вспомогательные функции лишь обертки над animate, приведу пример (демо):

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
// вызов метода
$('#my').slideUp();
 
// аналогичен
$('#my').animate({height:0,padding:0}, function(){
    $(this).css({display:"none"});
});
 
// вызов метода
$('#my').fadeOut();
 
// аналогичен
$('#my').animate({opacity:0}, function(){
    $(this).css({display:"none"});
});

В действительности, реализация данных методов чуть более сложная, но сути это не меняет

Стоит так же обратить внимание на способ задания параметров CSS для animate:

01
02
03
04
05
06
07
08
09
10
11
// установит прозрачность элемента в ноль, прозрачность изменяется от 0 до 1
$('#my').animate({opacity:0});
 
// наращиваем высоту элемента на 200px
$('#my').animate({height:'+=200px'});
 
// уменьшаем ширину элемента на 50px
$('#my').animate({width:'-=50px'});
 
// наращиваем высоту элемента до 20in
$('#my').animate({height:'20in'});

Step Callback

Не стоит забывать и о step-функции, приведу пример использования (демо):

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
var customStep = function(now, obj) {
    now; // текущее значение анимированного параметра
     
    obj.elem;  // объект анимации
    obj.prop;  // параметр который анимируется
    obj.start; // начальное значение
    obj.end;   // конечное значение
     
    obj.pos;   // коэффициент, изменяется от 0 до 1
               // значение now вычисляется как now = (obj.end - obj.start) * obj.pos
     
    obj.options; // опции настроек анимации
     
    // сделаем вывод текста
    $(this).html('Height: '+now+obj.unit);
}
$("p").animate({height: height}, {step:customStep});

Отключение

Иногда требуется отключить всю анимацию (для дебага к примеру) – воспользуйтесь следующей конструкцией:

1
jQuery.fx.off = true;

В очередь, … ©

Немного о очередности работы функции animate – большинство моих читателей уже знакомо с организацией последовательной анимации – для этого мы можем использовать цепочку вызовов:

1
2
$('.panel').animate({left:'+=100'})
      .animate({top:'+=100'}); // данная анимация добавляется в очередь на выполнение

Для параллельного запуска анимации, необходимо будет внести следующие изменения:

1
2
$('.panel').animate({left:'+=100'})
      .animate({top:'+=100'}, {queue:false});  // таким образом мы указываем, что очередь можно игнорировать

Так же есть функции stop – с помощью данной функции мы можем остановить выполнение текущей либо всех анимаций (демо):

1
2
3
4
$('.panel').stop();            // останавливаем выполнение текущей анимации
$('.panel').stop(true);        // останавливаем выполнение текущей анимации и всех последующих (чистим очередь)
$('.panel').stop(true, true);  // останавливаем выполнение текущей анимации и всех последующих, но применяем результат текущей
$('.panel').stop(false, true); // останавливаем выполнение только текущей анимации, и применяем её результат

Как очистить очередь мы разобрались, теперь можно чуть-чуть копнуть поглубже, и разобраться как можно управлять очередью. Для этой цели в jQuery служат следующие функции:

  • queue( name ) – возвращает очередь – массив функций
  • queue( name, callback ) – добавляет функцию в очередь
  • queue( name, queue ) – заменяет текущую очередь новой
  • dequeue( name ) – берет первую функцию из очереди и выполняет её

По умолчанию все манипуляции производятся с очередью “fx” – т.е. очередь со всей анимацией

Данные функции могут понадобиться для управления анимации (демо):

1
2
3
4
5
6
7
8
$(".panel").queue('fx'); // возвращает очередь эффектов анимации
$(".panel").data('fxqueue'); // аналогично предыдущему вызову
 
$(".panel").queue(function(){ /*...*/ }); // добавляет новую функцию в очередь анимации
 
$(".panel").queue("fx", []); // данный вызов очищает очередь анимации - мы устанавливает пустой массив в качестве новой очереди
 
$(".panel").dequeue(); // запускает первый элемент из очереди

Или вот пример реализации очереди отличной от “fx”:

1
2
3
4
5
6
7
8
var queue = $(".panel").queue('custom');
queue.push(function(){
    $(".panel").css({background:'#ffdddd'})
        .dequeue('custom');
});
     
$(".panel").queue('custom', queue)
    .dequeue('custom');

Пока я вижу одну недоработку – все анимации используют очередь “fx”, и никак изменить это нельзя, т.е. анимация либо идет вместе со всеми в этой очереди, либо сама по себе запускается сразу, назначить анимации другую очередь нельзя

Easing

Возвращаясь к анимации, думаю стоит обратить внимание на способ “наращивания” значений CSS свойств, происходит это следующим образом:

1
2
3
4
5
param = (to − from) × delta + from;
 
// from — начальное значение параметра
// to — конечное значение параметра
// delta — коэффициент, при 0 мы получаем начальное значение параметра, а при 1 — конечное

По умолчанию, для изменение delta используется линейное уравнение, опционально можно указать ‘swing’, но используя плагин easing, можно разнообразить этот список (демо) :

  • Quad — квадратичная функция (delta = progress2).
  • Cubic — кубическая функция (delta = progress3).
  • Quart — delta = progress4.
  • Quint — delta = progress5.
  • Expo — экспоненциальная функция (delta = 2(progress − 1) × 8)
  • Circ — четверть окружности (delta = 1 − sin(acos(progress)))
  • Sine — кусок синусоиды (delta = 1 − sin((1 − progress) × π / 2))
  • Back — сначала оттягивает delta в минус, а потом плавно доводит до 1
  • Bounce — прыгающий переход
  • Elastic — эластичный переход (резинка)

Данные функции оперируют следующими параметрами (именование параметров из jquery.js):

  • p – коэффициент прохождения анимации, изменяется от 0 до 1
  • n – коэффициент наложенный на время (p*duration)
  • firstNum – начальное значение = 0
  • diff – изменение значения = 1

При подготовке данного раздела использовались материалы из статьи Анимация в MooTools. Основы и не только

Плагины

Есть несколько плагинов, который расширяют функционал animate (возможно вы используете еще какие – то отпишитесь):

  • easing – дополнительные уравнения для easing (позволит разнообразить анимацию)
  • color – позволяет плавно изменять цвет шрифта/фона/границ
  • backgroundPosition – с его помощью можем анимировать фоновое изображение элементов

Вывод

Вывод напрашивается сам собой – большинство плагинов для анимации – это лишь обертки над animate, и следовательно не всегда стоит подключать сторонние плагины для реализации своей цели.

P.S. Для всех моих читателей – RSS канала доступен по адресу http://anton.shevchuk.name/feed/ (единственный верный).

P.P.S. Еще я постоянно зависаю на твиттере, так что следуйте за мной…