У цій статті ми розглянемо основи анімації в jQuery. щоб ви могли використовувати її в розробці складних сторінок. Анімація - це базова функціональність інтерактивних елементів веб-дизайну.
Дизайн веб-сайту відіграє головну роль в залученні відвідувачів на постійній основі. Інтерактивний дизайн привертає більше уваги в порівнянні зі звичайним статичним дизайном.
Практичне використання анімації в jQuery
jQuery широко використовується для розробки інтерактивних елементів, таких як слайдери, меню, скролери та інші. До того, як ми перейдемо безпосередньо до анімації, я пропоную вам поглянути на такі практичні приклади реалізації, що ілюструють міць анімації в jQuery.
- Бокове ковзання при прокручуванні;
- Злиття рамок зображень за допомогою jQuery;
- Анімація «Нічні сни»;
- Анімація відкриття завіси за допомогою jQuery;
- Створення розсовує меню навігації за допомогою jQuery.
Ви, як новачок, не зможете відразу повторити те, що наведено в цих прикладах. Тому далі ми розберемо основи анімації в jQuery з точки зору новачків.
Завантажити вихідні коди Демонстрація
Введення в основи анімації в jQuery
Ми можемо просто приховати / відобразити елемент, використовуючи CSS атрибути display або visibility. jQuery спрощує процес, представляючи дві функції hide і show. Розглянемо наступний код для відображення і приховування HTML елемента.
В ідеалі, нам потрібно згладити процес приховування і появи елементів, використовуючи анімацію, щоб поліпшити враження користувача. jQuery надає два вбудованих методу для відображення і приховування елементів з простою анімацією.
- Розчинення - реалізує процес поступового розчинення елемента HTML, змінюючи його властивість opacity;
- Ковзання - реалізує поступове розширення / стиснення елемента HTML, змінюючи його висоту.
Давайте подивимося, як застосовувати ці методи, щоб відображати і приховувати елементи з ефектом анімації.
jQuery инкапсулирует складність анімації, надаючи вбудовані методи для вирішення різних завдань веб-дизайну.
розчинення
Розчинення зазвичай реалізується за допомогою функцій fadeIn і fadeOut. Значення властивості opacity елемента збільшується функцією fadeIn і зменшується функцією fadeOut. Ми також можемо передати часовий інтервал розчинення, як показано в наступному прикладі:
ковзання
Функції ковзання для досягнення ефекту анімації змінюють висоту елемента, замість прозорості. Функції мають схожий синтаксис і працюють схожим з функціями розчинення чином.
При цьому slideUp використовується для приховування, а slideDown для відображення елементів. Наступний код показує основний спосіб використання функцій ковзання:
Приступаємо до роботи з функцією jQuery Animate
Більшість новачків думає, що розробка анімації досить складне завдання. Безумовно це складно, якщо ви починаєте з чистого аркуша. jQuery инкапсулирует всю складність, надаючи єдину функцію, яка керує всіма типами анімації.
У загальному випадку, анімація створюється зміною значень атрибутів CSS. Після того, як ви звикнете з jQuery функцією animate. побудова складної анімації стане простим завданням. Давайте почнемо з розгляду шаблону функції animate:
Цей код ілюструє шаблон використання функції animate. Перший параметр містить всі властивості і значення CSS.
Наступний необов'язковий параметр визначає тривалість анімації. Третій параметр визначає спосіб розтягування (тип анімації), а останній параметр визначає анонімну функцію, що викликається при завершенні анімації.
Подивившись на шаблон використання, ми можемо перейти до створення чогось практичного за допомогою анімації jQuery.
Анімація частин зображення
У цьому розділі ми подивимося на те, як можна відобразити зображення, застосувавши анімацію до окремих його частин. Спочатку нам потрібно розділити зображення на кілька маленьких. Ви можете використовувати техніку поділу зображень, представлену в цій статті: «Створення головоломки, використовуючи jQuery і PHP».
Ось зображення, яке ми будемо використовувати для анімації:
У вихідних кодах до цієї статті ви знайдете 12 зображень, одержані після поділу. Кожне зображення матиме розміри 150 на 150 пікселів. Вони розділені на два ряди по 6 штук. Всі 6 зображень кожного ряду будуть розташовані в правому кутку сторінки, використовуючи наступний код:
Тут наведено 12 зображень, розташованих в два ряди за допомогою двох класів CSS img_item і img_item2. Тепер подивимося на код CSS для позиціонування зображень:
Згідно наведеним вище коду все зображення в кожному ряду будуть приховані і розташовані поверх один одного, використовуючи абсолютне позиціонування. Тепер ми можемо подивитися на код jQuery для генерації зображення за допомогою анімації:
Отже, у нас є два селектора для відбору елементів класів img_item і img_item2. Потім ми застосовуємо функцію animate до окремих елементів, щоб плавно змінити значення властивості opacity на 1, а властивість left змінюємо щодо положення попередньої частини зображення. По суті, анімація буде застосована до всіх частин зображення одночасно, і в результаті вийде щось подібне:
Ми можемо використовувати схожі ефекти всередині слайдеров, заставок, галерей зображень. Тут приведена демонстрація попереднього прикладу.
Тепер ви знаєте основи роботи з функцією animate. Давайте глибше поглянемо на аспекти анімації, зокрема на більш детальні настройки.
Розробка послідовності ефектів
У попередньому прикладі анімація застосовувалася до всіх елементів відразу після завантаження сторінки. Але іноді нам потрібно застосовувати ефекти послідовно, коли анімація кожного елемента починається після завершення анімації попереднього елемента. Отже, спробуємо завантажити те ж саме зображення, використовуючи послідовність ефектів. Почнемо з HTML коду:
Єдина відмінність від попередньої версії - використання одного класу CSS замість двох класів для рядів. Ця реалізація згенерує ряди, використовуючи код jQuery, замість їх жорсткого кодування за допомогою CSS класів.
Код CSS для реалізації цього прикладу буде таким же, як і в попередньому випадку. Тепер подивимося на код jQuery для створення послідовності ефектів:
Після завантаження сторінки ми вибираємо всі елементи зображення, використовуючи клас img_item. Потім ми передаємо ці елементи в функцію animateImg для створення анімації. Наступний код демонструє реалізацію функції animateImg:
Функція animateImg використовує чотири параметри. Перший параметр визначає колекцію елементів зображення. Другий і третій параметри визначають значення властивостей left і top для позиціонування на екрані.
Спочатку ці два значення встановлюються в 0, щоб розташувати зображення у верхньому лівому кутку екрана. Четвертий параметр - це порядковий номер зображення для поділу їх по рядах.
Спочатку ми перевіряємо, чи досягли кінця масиву елементів, за допомогою умови if. Потім вибираємо зображення з масиву по заданому порядковому номеру.
Після цього викликаємо функцію animate тривалістю 1500 мілісекунд. Нарешті ми збільшуємо порядковий номер, щоб вибрати наступний елемент з масиву.
У цьому прикладі у нас два ряди по 6 зображень в кожному. Тому ми використовуємо розподіл по модулю порядкового номера, щоб перевірити, чи не досягли ми кінця ряду. В цьому випадку ми збільшуємо значення top для наступного зображення, щоб динамічно створювати ряди.
Нарешті ми рекурсивно викликаємо функцію animateImg. щоб здійснити перебір всіх елементів і згенерувати повну картинку. Наступне зображення демонструє послідовність ефектів в дії.
Тут ви знайдете демонстрацію попереднього прикладу.
Як бачите, ми використовували функцію завершення функції animate, щоб виконувати анімацію наступного елемента. Тому кожен етап анімації починається після завершення попереднього. Ми можемо досягти схожої функціональності, використовуючи чергу функцій animate.
ланцюжки ефектів
До сих пір ми створювали по одному ефекту для кожного елемента. У більш складних завданнях нам буде потрібно з'єднати кілька ефектів для кожного елемента в ланцюжок. Тому давайте змінимо попередній приклад, додавши ланцюжка ефектів:
Ми можемо створювати ланцюжка ефектів для елемента, викликаючи функцію animate кілька разів за допомогою точкового нотації. У попередньому прикладі ми починаємо іншу анімацію після першої, використовуючи функцію .animate. Ми можемо додати будь-яку кількість ефектів, використовуючи цю техніку. Тут є демонстрація ланцюжка ефектів.
висновок
У цій статті ми розглянули способи побудови анімації за допомогою jQuery функції animate. Ми подивилися на різні практичні прийоми застосування анімації до частин зображення, щоб згенерувати повну картинку.
Тепер ви можете продовжити вивчення методів поліпшеної анімації в jQuery, перерахованих в наступному списку:
- Черги ефектів;
- Управління процесом анімації;
- Управління кроками анімації;
Переклад статті «Beginners Guide to Working with jQuery Animation» був підготовлений дружною командою проекту Сайтобудування від А до Я.