Створення анімації на базі JavaScript за допомогою бібліотеки Anime.js. Частина 4


Дізнайтесь більше про нові кар'єрні можливості в EchoUA. Цікаві проекти, ринкова оплата, гарний колектив. Надсилайте резюме та приєднуйтеся до нас.

У фінальній частині будуть описані різні зворотні виклики (callback-функції), використовувані для виконання функцій залежно від прогресу анімації. Майже в кожному прикладі в попередніх статтях використовувалися властивості CSS, щоб показати, як працюють різні методи і параметри. Можливо, у вас могло створитися враження, що бібліотека Anime.js більше підходить для анімації CSS-властивостей. У цьому уроці ви дізнаєтеся, що її також можна використати для анімації SVG-файлів.

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

Callback-функції

Зворотні виклики використовуються для виконання функцій, грунтованих на прогресі анімації. У Anime.js існує 4 функції зворотного виклику: begin, run, update та comlete. Кожна з них запускається в певний час і приймає об’єкт анімації як свій аргумент.

Функція begin() викликається, коли анімація починається. Це означає, що якщо у анімації є параметр delay зі значенням 800 мілісекунд, то begin() буде викликана тільки через 800 мілісекунд. Можна перевірити, запустилася анімація чи ні, використовуючи функцію animationName.begin, яка повертає true (запустилася) чи false (не запустилася).

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

Callback-функція complete схожа на begin, тільки викликається вона після закінчення. Щоб перевірити, завершилася анімація чи ні, використайте animationName.complete, як і у випадку з begin.

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

var filesScanned ={ count: 0, infected: 0 };var scanCount = document.querySelector (".scan - count");var infected = document.querySelector (".infected - count"); var scanning = anime ({ targets: filesScanned, autoplay: false, count: 100, infected: 8, delay: 1000, duration: 2000, easing: " linear", round: 1,
update: function (anim) { if (anim.currentTime < 1000) { document.querySelector (".update - cb").innerHTML = "Creating an Index.".; } }, begin: function (){ document.querySelector (".begin - cb").innerHTML = "Starting the Scan.".; }, run: function (){ scanCount.innerHTML = filesScanned.count; infected.innerHTML = filesScanned.infected; }, complete: function (){ document.querySelector (".complete - cb").innerHTML = "Scan Complete.".; }});

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

Сама анімація починається із затримкою в 1000 мілісекунд, і саме у цей момент спрацьовує функція begin, яка показує користувачеві повідомлення "Starting the Scan". В той же час run починає виконуватися і оновлювати числові значення об'єкту після кожного кадру. Після закінчення анімації функція зворотного виклику complete відображає повідомлення "Scan Complete".

Функції плавності

Функції плавності використовуються для контролю переходу початкового значення властивості в кінцеве. Ці функції можна визначити за допомогою параметра easing, який може набувати значень як у вигляді рядків, так і у вигляді призначених для користувача координат кривих Без'є (у вигляді масиву).

Існує 31 вбудована функція плавності. Одна з них називається linear, інші 30 складаються з різних варіацій easeIn, easeOut і easeInOut. Класc elastic визначає три функції плавності: easeInElastic, easeOutElastic і easeInOutElastic. Ви можете управляти ними за допомогою параметра elasticity. Значення цього параметра може знаходитися тільки в діапазоні від 0 до 1000.

Використання easeIn прискорює зміну значення, починаючи з нуля. Це означає, що змінюватися воно буде спочатку повільне, а у кінці - швидко. Швидкість зміни на початку дорівнює нулю, а у кінці - 1000.

Функція easeOut уповільнює зміну значення, починаючи з максимальної швидкості.

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

З допомогою anime.easings можна створювати власні функції плавності. Нижче наведений приклад створення призначених для користувача функцій плавності :

anime.easings['tanCube'] = function (t) { return Math.pow (Math.tan (t * Math.PI / 4), 3);} anime.easings['tanSqr'] = function (t) { return Math.pow (Math.tan (t * Math.PI / 4), 2);} var tanCubeSequence = anime ({ targets: '.tan - cube', translateX: '75vw', duration: 2000, easing: 'tanCube', autoplay: false}); var tanSqrSequence = anime ({ targets: '.tan - sqr', translateX: '75vw', duration: 2000, easing: 'tanSqr', autoplay: false});

Анімації на основі SVG-файлів

У усіх пов'язаних з рухом анімаціях, які були створені до цього моменту, цільові елементи переміщалися по прямій лінії. У Anime.js можна переміщати елементи по складних SVG-контурах з великою кількістю кривих з можливістю контролю положення і кута елементів, що анімуються, на контурі. Щоб перемістити елемент по осі X на контурі, використайте path('x'). Так само елементи можна переміщати по осі Y, використовуючи path('y').

Якщо контур не представлений у вигляді прямої лінії, то він майже завжди формуватиме кут відносно основної горизонтальної лінії. При обертанні будь-якого некруглого елементу анімації загальна картинка виглядатиме природніше, якщо елемент переміщатиметься по куту контура. Це можна зробити, встановивши значення властивості rotate рівним path ('angle'). Нижче представлений приклад коду, який анімує чотири елементи з різними значеннями плавності по SVG-контуру :

var path = anime.path ('path'); var easings =['linear', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic']; var motionPath = anime ({ targets: '.square', translateX: path ('x'), translateY: path ('y'), rotate: path ('angle'), easing: function (el, i) { return easings[i]; }, duration: 10000, loop: true});

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

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

var morphing = anime ({ targets: 'polygon', points: [
{ value: '143 31 21 196 286 223'}, { value: '243 31 21 196 286 223'}, { value: '243 31 121 196 286 223'}, { value: '243 31 121 196 386 223'}, { value: '543 31 121 196 386 223'} ], easing: 'linear', duration: 4000, direction: 'alternate', loop: true});

Одним з найцікавіших ефектів Anime.js являється можливість створення лінійних малюнків. Все, що треба зробити - надати бібліотеці контур, який ви хочете використати для лінійного малюнка; надати інші параметри, за допомогою яких контролюється тривалість, затримка і плавність. У прикладі нижче використовувалася функція зворотного виклику complete, щоб зробити заливку малюнку якоря з Font Awesome жовтим кольором.

var lineDrawing = anime ({ targets: 'path', strokeDashoffset: [anime.setDashoffset, 0], easing: 'easeInOutCubic', duration: 4000, complete: function (anim){
document.querySelector ('path').setAttribute ("fill", " yellow"); }});

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

var letterTime = 2000; var lineDrawing = anime ({ targets: " path", strokeDashoffset: [anime.setDashoffset, 0], easing: " easeInOutCubic", duration: letterTime, delay: function (el, i){ return letterTime * i; }, begin: function (anim){ var letters = document.querySelectorAll (" path"), i; for (i = 0; i < letters.length; ++i){ letters[i].setAttribute (" stroke", " black"); letters[i].setAttribute (" fill", " none"); } }, update: function (anim){ if (anim.currentTime >= letterTime){
document.querySelector (".letter - m").setAttribute ("fill", "#e91e63"); } if (anim.currentTime >= 2 * letterTime) { document.querySelector (".letter - o").setAttribute ("fill", " #3F51b5"); } if (anim.currentTime >= 3 * letterTime) { document.querySelector (".letter - n").setAttribute ("fill", "#8bc34a"); } if (anim.currentTime >= 4 * letterTime) { document.querySelector (".letter - t").setAttribute ("fill", "#FF5722"); } if (anim.currentTime >= 5 * letterTime) { document.querySelector (".letter - y").setAttribute ("fill", "#795548"); } }, autoplay: false});

У прикладі вище для змінної letterTime встановлено значення 2 000 мілісекунд. Це той час, який буде витрачено на малювання однієї букви імені. Властивість delay використовує функції, грунтовані на індексі параметра, щоб встановити відповідне значення delay за допомогою змінної letterTime.

Індекс першої букви дорівнює нулю, тому Anime.js починає виводити її негайно. Для букви "О" встановлена затримка, рівна 2000 мілісекунд, оскільки саме цей час потрібно для виконання анімації попередньої букви.

Усередині функції зворотного виклику begin було встановлено значення black для обведення букв (stroke), а для fill - none. Таким чином можна очистити усі колірні значення, застосовані усередині callback-функції, і вони повернуться у своє початкове положення при запуску декількох циклів. Натисніть на кнопку "Write the Name" в прикладі нижче і побачите код у дії.

Висновок

З цієї статті ви дізналися про різні функції зворотного виклику, які використовуються для виконання завдань на зразок оновлення DOM або зміни значення атрибуту, грунтованого на прогресі анімації. Також ви познайомилися з різними функціями плавності і дізналися, як їх створюють. Крім того, в останній секції були представлені приклади використання SVG-файлів в Anime.js.

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

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

Переклад статті "JavaScript - Based Animations Using Anime.js, Part 4: Callbacks, Easings, and SVG"

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам'янець-Подільський, Стрий - за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?


Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *