Анімація з jQuery: 7-крокова програма (jquery animate)

16

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

Перед тим, як ми приступимо до практичних кроків, я Вам рекомендую переглянути демо-результат роботи.

Також завантажте вихідні коди собі на комп’ютер!

Передмова автора

Анімація: концепція, яка часто викликає протилежні реакції людей. Деякі хвалять її корисність, в той час як інші клянуть за занадто часте застосування. Тим не менш, правильно використовується анімація часто оживляє користувальницький інтерфейс і робить його більш привабливим і акуратним. У цьому підручнику ми почнемо з основ jQuery, потім дізнаємося, як створити свою першу анімацію (jquery animate), потім як побудувати ефекти і, нарешті, розробимо щось дійсно висококласне.

Зацікавлені? Давайте почнемо прямо зараз! Будь ласка, зауважте, всі адресоване виключно новачкам, тому я буду загострювати увагу на деяких моментах. Крокуйте разом зі мною.

Крок 1. Основи jQuery

jQuery — це бібліотека JavaScript, яка спрощує для нас, розробників, конструювання найкращих, функціональних, інтерактивних веб-сайтів та інтерфейсів за допомогою якомога меншої кількості рядків коду.

Звичайна рядок коду виглядає ось так:

$(DOM Element).something();

Давайте розглянемо кожну її частину:

$ — скорочення від «об’єкт jQuery». Використовуйте jQuery у разі, якщо ви берете іншу рамку на тій же самій сторінці, як тут: jquery(DOM Element).something();

(DOM Element) – елемент, з яким ви щось хочете зробити. Це один з тузів у рукаві jQuery. Тут для отримання одного з елементів можна використовувати селектори CSS. Будь-яке оголошення, яке працює в CSS-документі, може бути вжито тут. ID класи, псевдокласи — все, що хочете.

something() – те, що треба зробити з отриманим елементом. Це може бути все, що завгодно – від приховування елемента до AJAX-виклику до обробника подій.

Тут ми збираємося всього лише дотримуватися функціональності, пов’язаної з анімацією і ефектами.

Крок 2. Використання вбудованих ефектів

jQuery пропонує тисячу вбудованих методів, які може використовувати без додаткової установки. До них відносяться методи відображення/приховування елементів з величезною кількістю варіантів, включаючи ковзання і зникнення елемента. До ваших послуг також безліч методів-перемикачів, які перемикають видимість елементу, про який йде мова.

Перш ніж ми розглянемо кожен з цих методів, ось загальний формат для кожного методу:

$(«#element»).effect([speed, callback]);

Слідуючи загальній парадигмі jQuery, ми спочатку орієнтовані на потрібний елемент, який використовує селектори CSS. Далі ми просто викликаємо будь вбудованих методів.

У той час як більшість методів можуть бути викликані без передачі будь-яких параметрів, можливо, ви хотіли б змінити під свої вимоги їх функціональність. Кожен з методів приймає принаймні параметри швидкості і зворотного виклику.

Швидкість означає тривалість анімації в секундах. Ви можете встановити в рядках сповільнену, нормальну або швидку швидкість, або ж можете більш точно встановити час в мілісекундах.

Зворотний виклик – це функція, яка виконується, коли анімація закінчена. Її можна використовувати, щоб щось зробити, виконати виклик AJAX у фоновому режимі, оновити іншу частину інтерфейсу і так далі. Межею служить тільки ваша фантазія.

Ось список функцій, що йдуть в комплекті з jQuery:

show/hide (показати/сховати)– методи показу і приховування елемента. В якості параметрів використовує швидкість і зворотний виклик.

toggle (перемикання)– метод, який управляє відображенням елемента в залежності від його поточного стану, наприклад, якщо елемент прихований, то починає відображатися, і навпаки. Використовує методи показу і приховування.

slideDown/slideUp (зміщення вниз/зміщення вгору)- говорить сам за себе. Змінює висоту елемента для створення ковзної анімації, що дозволяє виявити або приховати елемент.

slideToggle (ковзне перемикання)- те ж саме, що і метод перемикання, за винятком того, що використовує методи slideDown/slideUp для прояву або приховування елементів.

fadeIn/fadeOut (посилення/загасання)- змінює непрозорість елементу, про який йде мова, для створення ефекту поступового зміни.

fadeTo – видозмінює непрозорість елемента ідентично переданої величиною. Очевидно, він використовує додатковий параметр непрозорості, де 0 – абсолютна прозорість, а 1 – повна непрозорість.

Як додатковий засіб, вищезгаданий метод перемикання має альтернативну реалізацію, де він використовує вираз, як параметр для визначення того, чи показувати або приховувати елемент.

Наприклад, якщо ви хочете поставити лише список елементів, які мають клас effect(ефект), ваш код буде виглядати ось так:

$(«li»).toggle( $(this).hasClass(«effect») );

Простіше кажучи, функція перемикача перевіряє вираз, передане їй, і якщо воно вірне, то вона перемикається. Якщо ні, то її залишають у спокої. Вираз, який ми тут передали, перевіряє, чи має елемент певний клас.

Крок 3. Побудова власної анімації

Часто вбудовані методи не зовсім підходять під ваші потреби, і в цьому випадку ви, напевне, захочете побудувати свої власні ефекти. jQuery дозволить вам це зробити. Досить легко, загалом-то.

Щоб зробити власний анімаційний ефект, ви використовуєте метод animate. Дозвольте показати вам.

$(«#somelement»).animate({property: value}, [speed, callback] );

Метод animate такий же, як і всі інші методи, і викликається таким же чином. Ми запитуємо елемент і потім передаємо йому деякі параметри. Ці параметри дозволяють створити анімацію, відмінну від вбудованих ефектів.

Параметри speed і callback аналогічні попереднім методом. Об’єкт — набір властивостей, який може містити декілька пар ключ/значення – це саме те, що робить метод унікальним. Ви передаєте кожне властивість, яке потрібно анімувати, разом з кінцевим значенням. Наприклад, припустимо, що ви хочете анімувати елемент на 90% від його поточної ширини, тоді вам доведеться зробити щось на кшталт такого:

$(«#somelement»).animate({width: «90%»}, 350, function()
{alert («The animation has finished running.»);});

Вищенаведений фрагмент анімує елемент на 90% його ширини, а потім подає сигнал користувачеві, який вказує на те, що анімація закінчена.

Зверніть увагу, що ви не обмежені у розмірах. Можна анімувати широкий набір властивостей, включаючи непрозорість, поля, доповнення пробілами, межі, розміри шрифтів. Метод також дуже гнучкий, коли мова заходить про модулях програми. Працює все – пікселі, відсотки. Запрацює все перемешенное, як показано нижче. Правда, виглядати зв’язковим воно не буде.

$(«#somelement»).animate({
width: «90%»
fontSize: «14em»,
height: «183px»,
opacity: 0.8,
marginTop: «2cm»,
marginLeft: «0.3 in»,
borderBottom: «30мм»,
}, 350, function(){alert («The animation has finished running.»);});

При визначенні властивості, що складається більш ніж з одного слова, зауважте, що його потрібно визначати разом прописними літерами без поділяють дефісів (т. зв. camel case). Це контрастує з звичайним синтаксис CSS, так що зверніть увагу. Правильно borderTop, а не border-top.

Примітка: jQuery дозволяє анімувати тільки властивості, що приймають числові значення. Це означає, що можна використовувати тільки основні властивості, а все що пов’язано з кольором — ні. Але не хвилюйтеся. За допомогою jQuery UI ми незабаром зможемо анімувати і кольору.

Крок 4. Тонка настройка ефекту

Якщо ви подивитеся на простий ефект в демо-ролику, можете помітити, що іноді він трохи порушується. Неодноразове рух курсору миші над елементом створює довгу чергу, із-за якої анімація повторюється кілька разів.

Найпростіший спосіб уникнути цієї проблеми – використовувати метод stop відразу перед початком анімації. Він ефективно очищає чергу і анімація може йти як звичайно. Наприклад, таким буде звичний код.

$(«#someelement»)
.hover(function() {
$(this).animate({ top: 20 }, ‘fast’);
}, function() {
$(this).animate({ top: 0 }, ‘fast’);
});

Якщо використовувати stop щоб уникнути надбудов, ваш новий код буде таким:

$(«#someelement»)
.hover(function() {
$(this).stop().animate({ top: 20 }, ‘fast’);
}, function() {
$(this).stop().animate({ top: 0 }, ‘fast’);
});

Досить просто, чи не так? Але цей метод має невелику проблемку. Швидкий рух не призведе до зайвих повторень, але анімація залишиться незавершеною. Якщо хочете повністю позбутися від цього недоліку, вам доведеться використовувати плагін типу hoverFlow.

Крок 5. Додамо трохи реалізму — прискорення

Якщо ви хочете додати трохи реалізму, вам потрібно краще контролювати швидкість проходження анімації. Ось де і таїться easing (прискорення). Воно, по суті, керує прискоренням і уповільненням анімації в часі.

За замовчуванням метод easing – це гойдалка, вбудована в jQuery. Плагін easing Robert’а Penner’а дозволяє використовувати безліч ефектів прискорення. Зверніться до розділу easing в демо-ролику, щоб поглянути на кожен ефект прискорення.

Коли справа доходить до використання власного ефекту прискорення, то дозвольте попередити: його можна використовувати тільки з методом animate. Коли ви маєте приєднаний плагін прискорення, використовувати власний метод прискорення так само просто, як і передавати його в якості параметра, як вказано тут:

$(«#somelement»).animate({
width: «90%»
height: «183px»,
}, 550, «easeInElastic»);

Обов’язково перегляньте розділ прискорення в демо-ролику, щоб побачити кожен метод у дії. В той час, як деякі з ефектів прискорення можуть не підходити для всіх ситуацій, ваші анімації обов’язково будуть виглядати більш привабливо з належним використанням цих методів.

Крок 6. Підганяємо «тютелька в тютельку» — jQuery UI

Оновлення до jQuery UI додає безліч дуже потрібних функцій. Вам, фактично, не потрібна вся бібліотека для того, щоб користуватись додатковими функціями. Вам потрібно тільки файл ефектів ядра, щоб скористатися всією функціональністю. Не ядро UI, а тільки файл ефектів ядра, який важить якихось мізерних 10 кілобайт.

Важливі функції, які додає в таблицю бібліотека ефектів jQuery UI – це підтримка анимирования квітів, прискорення і трансформація класів.

Якщо пам’ятаєте, я вже згадував, що з ядром бібліотеки jQuery ви обмежені тільки анимированием тих якостей, які приймають числові значення. В jQuery UI всі обмеження знімаються. Тепер можна легко анімувати колір фону елемента, колір його межі і так далі.

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

$(«.block»).hover(function() {
$(this).animate({ borderColor: «black» }, 1000);
},function() {
$(this).animate({ borderColor: «red» }, 500);
});

Трансформація класів відповідає за анімацію між класами. Використовуй ви базову бібліотеку, якщо прибрали, а потім додали клас, який змінив зовнішній вигляд елемента, перехід б відбулося миттєво. При наявності бібліотеки UI на борту ви отримуєте опцію переходу в додаткові параметри, щоб продумати швидкість анімації, методи прискорення і зворотного виклику. Як і в попередньої функції, ця функціональність побудована на підставі існуючого jQuery API, який прискорює процес переходу.

І остання характеристика, яку вносить jQuery, це інтегровані рівняння прискорення. Раніше вам доводилося користуватися додатковим плагіном, щоб подбати про це, але зараз вони йдуть в комплекті, так що більше про це не слід турбуватися.

Крок 7. Побудова нашого першого по-справжньому висококласного ефекту

Всі вищенаведені приклади були потрібні просто як демо-ролики функціональності, про яку йшла мова. Не буде краще дійсно побудувати щось класне? Це як раз те, що ми збираємося сьогодні зробити. Нічого радикально нового або приголомшливого, але це цей демо дасть вам можливість вкласти все те, що ми сьогодні дізналися, створення висококласного сценарію.

Уявіть: ви хочете показати зображення, і коли миша користувача вказує на нього, ви демонструєте два розділи всередині картинки. Один показує заголовок, а другий показує крихітне опис зображення. Я впевнений, ви знайдете буквально незліченна безліч плагінів, які роблять те ж саме, але сьогодні ми збираємося побудувати його з нуля. Я обіцяю вам, що це не так складно, як здавалося б. Фактично, це дуже легко і можна побудувати дуже швидко. Давайте почнемо.

HTML-код

По-перше, нам потрібна проста базова розмітка, на якій можна будувати.

Beginning Animations with jQuery — by Siddharth for NetTuts

Beginning Animations with jQuery

by Siddharth for the lovely folks at Net Tuts

A simple real world usage of the animation effects followed by demos for the article’s text demonstrating a fix for animation build up and the different easing methods available.

A Simple Real World Effect

When the method is changed, it goes to zero height using the standard jQuery easing and then expands using the specified easing method.

ThemeForest

Анімація з jQuery: 7-крокова програма (jquery animate)

The only place you need for site templates and themes
CodeCanyon

Анімація з jQuery: 7-крокова програма (jquery animate)

The premier destination for scripts and code snippets

Для отримання цього ефекту нам, по-перше, потрібно обміркувати структуру кожного елемента. Кожен такий елемент полягає в оболонку div з класом item. Всередині оболонки div поміщається 3 тега: саме зображення і два дочірніх елемента div, що містять назву і опис.

Інші частини досить звичайні і говорять самі за себе. Ми починаємо з включення бібліотеки jQuery, бібліотеки jQuery UI і нашого файлу, який містить звичайний код JavaScript. Зауважте, що мені знадобилося лише частина ядра ефектів jQuery UI, так що я скачав тільки його. Якщо вам потрібно більше вбудованих ефектів, то потрібна спеціальна збірка. Її можна завантажити тут.

Ось як виглядає наша сторінка на цьому етапі.

Анімація з jQuery: 7-крокова програма (jquery animate)

CSS

.item {
position: relative;
margin: 20px 60px 40px 0;
overflow: hidden;
}
.item .title -.item .desc {
background: #000;
color: #fff;
position: absolute;
display: block;
width: 638px;
opacity: 0.4;
}
.item .title {
top: 0;
font-size: 16px;
padding: 12px 10px 25px 0;
text-align: right;
}
.item .desc {
bottom: 0;
font-size: 12px;
padding: 5px 0 15px 10px;
}

Тут ви повинні дещо взяти на замітку. Кожен елемент має властивість position встановлене як relative (відносне), так, що елементи всередині нього можуть бути встановлені в абсолютних координатах. Крім того, властивість overflow(переповнення) встановлено на hidden(приховано), так що ми можемо приховувати назву і опис за межами видимої області, поки вони нам не знадобляться.
Назва та опис мають властивість position встановленим на absolute(абсолютне) і можуть бути точно визначені всередині зовнішнього елемента. Назва має верхнє значення top(верх) встановленим на 0, так що воно знаходиться зверху, а опис має своє нижнє значення bottom(низ) рівним 0, так що знаходиться прямо в самому низу.
Крім того, CSS дуже шаблонний і займається головним чином розміткою тексту, трохи позиціонуванням і стилями. Нічого надто радикального.

Ось як виглядає наша сторінка на цій стадії.

Анімація з jQuery: 7-крокова програма (jquery animate)

Магія JavaScript, включена за допомогою jQuery

$(document).ready(function()
{
// Code for other parts of the demo
$(«.item»).children(«div.title»).animate({top: -60}, 300);
$(«.item»).children(«div.desc»).animate({bottom: -40}, 300);
$(«.item»).hover(
function()
{
$(this).children(«div.title»).stop().animate({top: 0}, 700, «easeOutBounce»);
$(this).children(«div.desc»).stop().animate({bottom: 0}, 700, «easeOutBounce»);
},
function(){
$(this).children(«div.title»).stop().animate({top: -60}, 500);
$(this).children(«div.desc»).stop().animate({bottom: -40}, 400);
}
);
$(«.title -.desc»).hover(
function()
{
$(this).stop().animate({backgroundColor: «#444»}, 700, «easeOutSine»);
},
function(){
$(this).stop().animate({backgroundColor: «#000»}, 700);
}
);
});

Може бути, виглядає дуже вражаюче, але насправді це не так. Я поясню кожну частину.

Логіка цього ефекту досить проста. Оскільки елементи розміщені абсолютно, ми поміщаємо їх поза вікна перегляду. Коли над зображенням проводять мишею, нам просто потрібно пересунути елемент назад у вихідну позицію, тобто вгору і вниз зображення.

По-перше, ми прибираємо назву і опис з виду. Ми робимо це за допомогою JavaScript, а не CSS з дуже конкретної причини. Навіть якщо JavaScript відключений, він виглядає досить витончено. Назва і опис, як і раніше накладені поверх зображення і все це виглядає як в стадії проведення над ним мишею. Якщо для приховування назви і опису використовувати CSS, і при цьому відключити JavaScript, вони будуть повністю приховані і абсолютно марні. Я вибрав для брудної роботи JavaScript в інтересах забезпечення кращої якості.

Ми спочатку прив’язали наш користувацький код до функції hover кожного елемента класу item. Це дозволяє зробити цей обробник досить універсальним і багаторазово використовуваних. Додавання цієї функціональності до будь-яким іншим елементам так само просто, як і надання їм класу item. Перша функція – для події hover, друга – для події unhover.
В рамках функції параметр this відноситься до елемента, який запустив подія. Для зміни відповідних значень ми користуємося методом animate. Ми також використовуємо трохи прискорення для того, щоб зробити його більш помітним. На mouseout або unhover ми просто змінили їх значення назад до значень за замовчуванням.

І ще, коли над контейнерами назви і опису проводять мишею, вони повільно трансформують кольору завдяки jQuery UI.

Власне, ми закінчили. Не так вже багато часу зайняло, чи не так? І не так вже погано для крихітного скрипта, який здається ще більш крихітним, якщо врахувати, скільки рядків було виділено виключно у фігурних дужках.

Висновок

І ось він перед вами. Як створити анімацію за допомогою jQuery з відмінним високоякісним прикладом застосування того, про що ви дізналися. Сподіваюся, ви знайшли цей підручник цікавим і корисним. Можете використовувати цей код де завгодно в ваших проектах і сигналізуйте тут, якщо зіткнулися з труднощами.

Питання? Похвала? Критика? Напишіть розділі коментарів. Щасливого кодування!

Завантажити вихідні коди zip-архівом

Перегляд Demo

Переклад і редакція: Ріг Віктор і Андрій Бернацький. Команда webformyself.

E-mail: [email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування

P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.