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


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

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

У цій частині ви дізнаєтеся, як використати Anime.js для правильного тайминга анімації різних елементів, використовуючи певні параметри. Це дозволить вам контролювати порядок, в якому послідовність анімації відтворюється як для окремого елементу, так і для усіх.

З якими параметрами ви познайомитеся в цій статті:

  • duration;
  • delay;
  • easing;
  • elasticity;
  • target;
  • index;
  • targetCount;
  • loop;
  • autoplay;
  • direction.

Параметри властивостей

Ці параметри дозволяють контролювати тривалість, затримку і плавність як одиничних властивостей, так і цілої групи відразу. Параметри duration і delay задаються в мілісекундах. Значення за умовчанням для тривалості дорівнює 1 000 мілісекундам, що дорівнює 1 секунді. Будь-яка анімація, застосована до елементу, за умовчанням відтворюватиметься впродовж однієї секунди. Параметр delay визначає проміжок часу, який повинен пройти від моменту запуску анімації до її початку. За умовчанням значення параметра дорівнює нулю – елемент буде анімований відразу після запуску анімації.

Для контролю швидкості відтворення анімації використайте параметр easing. Деякі анімації починаються повільно, прискорюються до середини, а до кінця знову сповільнюються. Інші починають відтворюватися на великій швидкості, а ближче до кінця сповільнюються. Проте в усіх випадках анімація завжди виконується впродовж того часу, який ви визначили в параметрі duration. Anime.js має велику кількість функцій плавності, які можна застосувати до елементів безпосередньо, використовуючи їх імена. Щоб управляти скачками значення назад і вперед, встановите параметр elasticity з призначеним для користувача значенням.

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

var slowAnimation = anime ({ targets: '.square', translateY: 250, borderRadius: 50, duration: 4000}); var delayAnimation = anime ({ targets: '.square', translateY: 250, borderRadius: 50, delay: 800}); var cubicAnimation = anime ({ targets: '.square', translateY: 250, borderRadius: 50, duration: 1200, easing: 'easeInOutCubic'});

Використайте параметри властивостей або незалежно від інших, або в комбінаціях. Для змінної cubicAnimation застосовані два параметри: duration і easing. У прикладі вище тривалість анімації дорівнює 1 200 мілісекундам, що дорівнює 1.2 секунд. Якби вона не була позначена, то тривала б 1 секунду.

Одно головне обмеження властивостей параметрів в прикладі вище полягало в тому, що цільовий елемент матиме однакові значення duration, delay і easing для усіх своїх властивостей.

Наприклад, замість переходу і зміни міри округлення кутів елементу одночасно, виконаєте перехід, потім зміните міру округлення кутів. Anime.js дозволяє визначати різні значення для параметрів duration, delay, easing і elasticity. Уривок коду знизу прояснить ситуацію:

var indiParam = anime ({ targets: '.square', translateY: { value: 250 }, rotate: { value: '2.125turn'}, backgroundColor: { value: 'rgb (255,0,0) ', duration: 400, delay: 1500, easing: 'linear'}, duration: 1500});

У коді вище усі властивості, які треба було анімувати, мають різні значення. Для кольору фону анімації встановлена тривалість, рівна 400 мілісекундам, тоді як для обертання rotate і для переходу translate використовувалося глобальне значення тривалості, рівне 1 500 мілісекундам.

Для фонового кольору анімації встановлений параметр delay, тому будь-яка зміна кольору цільового об’єкту почнеться тільки після 1 500 мілісекунд (як і було визначено в коді). Властивості rotate і translateY використовують значення за умовчанням для параметрів delay і easing через відсутність яких-небудь локальних або глобальних значень для них.

Функціонально-орієнтовані параметри (Параметри на основі функцій)

Грунтовані на властивостях параметри корисні, коли треба змінити порядок і тривалість анімації для одиничних властивостей. Проте, ті ж самі duration і delay будуть застосовані до одиничних властивостей усіх цільових елементів. Параметри на основі функцій дозволяють окремим чином компактно визначити duration, delay, elasticity і easing для різних цільових елементів. В цьому випадку ви встановлюєте значення різних параметрів, використовуючи функції замість чисел. Ці функції приймають три параметри: target, index і targetCount.

  • target зберігає посилання на поточний цільовий елемент.
  • index зберігає індекс або положення поточного цільового елементу.
  • targetCount зберігає загальну кількість цільових елементів.

Параметр target корисний, коли значення анімації треба встановити на основі деяких атрибутів цільового елементу. Наприклад, ви можете зберегти значення параметрів delay, duration чи easing для цільового елементу в атрибутах даних, а потім звернутися до них пізніше.

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

Параметр index передає позицію поточного цільового елементу. Його можна використати для поступової зміни значення параметрів ніби duration і delay для різних елементів.

Звичайно це корисно, якщо ви хочете встановити значення в порядку зростання. Також можна відняти index з targetCount, щоб встановити значення в порядку убування. Уривок коду нижче використовує ці параметри для визначення значень в порядку зростання і убування :

var delaySequence = anime ({ targets: '.square', translateY: 250, delay: function (target, index) { return index * 200; }}); var delaySequenceR = anime ({ targets: '.square', translateY: 250, delay: function (target, index, targetCount) { return (targetCount - index)  * 200; }});

Код нижче встановлює різні значення параметра easing для кожного цільового елементу, використовуючи index:

var easeInValues =['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeInElastic']; var easeInSequence = anime ({ targets: '.square', translateY: 250, duration: 2000, easing: function (target, index) { return easeInValues[index]; }, autoplay: false});

Параметри анімації

Останній набір параметрів дозволяє вказати, скільки разів повинні відтворюватися анімація, і напрям, в якому вона повинна програватися. Щоб визначити кількість відтворень анімації, використайте параметр loop. Існує параметр autoplay, у якого може бути два стани: true (встановлено за умовчанням) і false. Анімація автоматично не запускатиметься, якщо поставите значення false.

Параметр direction вказує напрям відтворення анімації.

У нього є три значення:

  • normal – стандартне значення за умовчанням, яке не змінює напрям анімації. Якщо значення loop більше 1, то цільові елементи повертатимуться вмить до своїх вихідних позицій і анімація відтворюватиметься із самого початку.
  • reverse – при значенні loop більше 1 анімація програється в зворотному порядку, тобто від кінцевої точки до початкової. Після цього елементи вмить переміщаються на вихідні позиції і все починається наново.
  • alternative – значення параметра, при якому анімація змінює напрям після кожного циклу.
var normalLoop = anime ({ targets: '.square', translateY: 250, delay: function (target, index) { return index * 200; }, loop: 4, easing: 'easeInSine', autoplay: false});

Висновок

У цій частині ви познайомилися з різними видами параметрів, які використовуються для управління анімацією цільових елементів в Anime.js. Параметри властивостей використовуються для контролю над взаємодією з одиничними елементами.

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

Переклад статті “JavaScript – Based Animations Using Anime.js, Part 2: Parameters”

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


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

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