Продовжуємо вивчати 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 (демо):

// виклик методу
$(‘#my’).hide();
// аналогічний
$(‘#my’).css({display:”none”});
// але якщо задати швидкість анімації або callback функцію,
// то будуть зміняться значення height і width

Як я і казав раніше – інші допоміжні функції лише обгортки над animate, наведу приклад (демо):

// виклик методу
$(‘#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:

// встановить прозорість елемента в нуль, прозорість змінюється від 0 до 1
$(‘#my’).animate({opacity:0});
// нарощуємо висоту елемента на 200px
$(‘#my’).animate({height:’+=200px’});
// зменшуємо ширину елемента на 50px
$(‘#my’).animate({width:’-=50px’});
// нарощуємо висоту елемента до 20in
$(‘#my’).animate({height:’20in’});

Step Callback

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

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});

Відключення

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

jQuery.fx.off = true;

В чергу … ©

Трохи про черговості роботи функції animate – більшість моїх читачів вже знайомі з організацією послідовної анімації – для цього ми можемо використовувати ланцюжок викликів:

$(‘.panel’).animate({left:’+=100′})
.animate({top:’+=100′}); // дана анімація додається в чергу на виконання

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

$(‘.panel’).animate({left:’+=100′})
.animate({top:’+=100′}, {queue:false}); // таким чином ми вказуємо, що чергу можна ігнорувати

Так само є функції stop – за допомогою цієї функції ми можемо зупинити виконання поточної або всіх анімацій (демо):

$(‘.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” – тобто чергу зі всієї анімацією

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

$(“.panel”).queue(‘fx’); // повертає чергу ефектів анімації
$(“.panel”).data(‘fxqueue’); // аналогічно попереднім викликом
$(“.panel”).queue(function(){ /*…*/ }); // додає нову функцію в чергу анімації
$(“.panel”).queue(“fx”, []); // даний виклик очищає чергу анімації – ми встановлює порожній масив в якості нової черги
$(“.panel”).dequeue(); // запускає перший елемент черги

Або ось приклад реалізації черзі відмінною від “fx”:

var queue = $(“.panel”).queue(‘custom’);
queue.push(function(){
$(“.panel”).css({background:’#ffdddd’})
.dequeue(‘custom’);
});
$(“.panel”).queue(‘custom’, queue)
.dequeue(‘custom’);

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

Easing

Повертаючись до анімації, думаю варто звернути увагу на спосіб “нарощування” значень властивостей CSS, відбувається це наступним чином:

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 — стрибучий перехід
  • Пружно — еластичний перехід (гумка)

Дані функції оперують такими параметрами (найменування параметрів 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. Ще я постійно зависаю на твіттері, так що йдіть за мною…

Цикл статей

  • jQuery для початківців
  • jQuery для початківців. Частина 2. JavaScript Меню
  • jQuery для початківців. Частина 3. AJAX
  • jQuery для початківців. Частина 4. Селектори
  • jQuery для початківців. Частина 5. Ефекти
  • jQuery для початківців. Частина 6. Події
  • jQuery для початківців. Частина 7. Пишемо плагіни
  • jQuery для початківців. Частина 8. Розширюємо фільтри
  • jQuery для початківців. Частина 9. Пишемо плагіни анімації