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


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

Anime.js – невелика бібліотека для створення анімації на основі JavaScript. З її допомогою можна анімувати властивості CSS, SVG- зображення або атрибути DOM-дерева на веб-сторінці. Бібліотека дозволяє контролювати усі аспекти анімації і надає багато способів для позначення елементів, які треба привести в рух.

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

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

Примітка: Якщо ви зовсім новачок в JavaScript, пропонуємо вам ознайомитися з ввідною статтею по цій мові програмування.

Установка бібліотеки

Для установки можна використати команди npm чи bower:

npm install animejs bower install animejs

Ви також можете завантажити бібліотеку і включити у свій проект або посилатися на її останню версію через CDN.

%MINIFYHTML751ff187b6af0c5581930fc8e8e84c6c2%

Після успішної установки ви зможете використати Anime.js для додавання цікавих анімацій до ваших елементів. Давайте розпочнемо з базових можливостей бібліотеки.

Визначення цільових елементів

Для створення анімації за допомогою Anime.js треба викликати функцію anime () і передати їй об’єкт з парами ключ-значення, які визначають цільові елементи і властивості, які ви хочете анімувати. Ви можете використати ключове слово targets, щоб дати бібліотеці зрозуміти, що вам треба анімувати. Це ключове слово може набувати значення в різних форматах.

CSS- селектори: ви можете передавати один або більше селекторів у вигляді значень для ключового слова targets.

var blue = anime ({ targets: '.blue', translateY: 200}); var redBlue = anime ({ targets: '.red, .blue', translateY: 200}); var even = anime ({ targets: '.square:nth-child(even)', translateY: 200}); var notRed = anime ({ targets: '.square:not(.red)', translateY: 200});

У першому випадку Anime.js анімуватиме усі елементи з класом blue. У другому – blue чи red. У третьому випадку Anime.js анімуватиме усі дочірні парні елементи з класом square. А в останньому випадку бібліотека взаємодіятиме з усіма елементами з класом square, у яких немає класу red.

DOM-вузли (DOM node) або колекція вузлів (NodeList) : ви можете також використати DOM-вузол або NodeList в якості значення для ключового слова targets. Подивіться на приклад використання DOM-вузла для targets.

var special = anime ({ targets: document.getElementById ('special'), translateY: 200}); var blue = anime ({
targets: document.querySelector ('.blue'), translateY: 200}); var redBlue = anime ({ targets: document.querySelectorAll ('.red, .blue'), translateY: 200}); var even = anime ({ targets: document.querySelectorAll ('.square:nth-child(even)'), translateY: 200}); var notRed = anime ({ targets: document.querySelectorAll ('.square:not(.red)'), translateY: 200});

У першому випадку використовувалася функція getElementById (), щоб звернутися до певного елементу. Функція querySelector () використовувалася для звернення до елементу з класом blue. А функція querySelectorAll () застосовувалася для звернення до усіх елементів усередині документу, які відповідають групі певних селекторів або ж, навпаки, не входять в неї.

Існує безліч функцій, які ви також можете використати для вибору цільового елементу. Наприклад, ви можете звернутися до елементів з певним класом, використовуючи функцію getElementsByClassName (). Чи до елементів з певним тегом, використовуючи функцію getElementsByTagName ().

Будь-яка функція, яка повертає DOM-вузол або NodeList, може використовуватися для установки значення targets у Anime.js.

Об’єкт: ви можете використати об’єкти JavaScript в якості значення для targets. Ключ цього об’єкту використовується як ідентифікатор, а значення – в якості числа, яке треба анімувати.

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

var filesScanned ={ count: 0, infected: 0 }; var scanning = anime ({ targets: filesScanned, count: 1000, infected: 8, round: 1, update: function (){ var scanCount = document.querySelector ('.scan - count'); scanCount.innerHTML = filesScanned.count; var infectedCount = document.querySelector ('.infected - count'); infectedCount.innerHTML = filesScanned.infected; }});

Код вище приводитиме в рух лічильник файлів, що сканують, від 0 до 1 000 і лічильник заражених файлів від 0 до 8. Пам’ятайте, що ви можете анімувати числові значення тільки таким чином. При спробі анімувати ключ AAA у BOY буде виведено повідомлення про помилку.

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

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

var multipleAnimations = anime ({ targets: [document.querySelectorAll ('.blue') '.red, #special'], translateY: 250});

Які властивості можна анімувати за допомогою Anime.js

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

Властивості CSS

До таких, наприклад, відносяться ширина, висота і колір для різних цільових елементів. Фінальні значення різних властивостей, що анімуються, ніби background - color визначаються з використанням lowerCamelCase. Таким чином background - color перетворюється на backgroundColor. Код нижче ілюструє анімацію положення об’єкту left і кольори фону (backgroundColor) цільового об’єкту.

var animateLeft = anime ({ targets: '.square', left: '50%'}); var animateBackground = anime ({ targets: '.square', backgroundColor: '#f96'});

Властивості можуть набирати різного вигляду значень, які вони б прийняли при використанні звичайного CSS. Наприклад, властивість left може мати такі значення: 50vh, 500px чи 25em. Ви також можете не вказувати одиницю виміру після числа, але у такому разі нею стане px за умовчанням. Аналогічні дії можна виконати з background - color, вказавши колір у вигляді шістнадцятизначного значення або за допомогою коду RGB або HSL.

CSS- трансформація

Перетворення по осях X і Y досягається за допомогою властивостей translateX і translateY. Аналогічним чином можна масштабувати, нахиляти або обертати елемент уздовж певної осі, використовуючи властивості: scale (масштабування), skew (нахил) чи rotate (поворот)що відповідають цій конкретній осі.

Існує можливість визначення різних кутів або в градусах, або за допомогою властивості turn. Значення turn, рівне 1, відповідає 360 градусам. Це дозволяє зробити обчислення простіше, оскільки ви знаєте, на скільки треба повернути елементи відносно своєї осі. У прикладі нижче показано, як відбувається анімація масштабування, переходу або повороту як одиничної властивості, так і усіх відразу.

var animateScaling = anime ({ targets: '.square',
scale: 0.8}); var animateTranslation = anime ({ targets: '.square', translateX: window.innerWidth*0.8}); var animateRotation = anime ({ targets: '.square', rotate: '1turn'}); var animateAll = anime ({ targets: '.square', scale: 0.8, translateX: window.innerWidth*0.8, rotate: '1turn'});

Атрибути SVG

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

У міру поглиблення у бібліотеку ви дізнаватиметеся, як створюються складніші анімації. Нижче представлений код для анімації атрибутів круга cy, cx і stroke - width. Як і з іншими властивостями CSS, для stroke - width потрібно використати CamelCase, щоб код працював коректно.

var animateX = anime ({ targets: '.circle', cx: window.innerWidth*0.6}); var animateStrokeWidth = anime ({ targets: '.circle', strokeWidth: '25'});

Атрибути DOM

Можна анімувати числові атрибути DOM, подібно до того, як ви анімували атрибути SVG. Це може бути корисним для роботи з елементом progress у HTML5. У нього є два атрибути: value і max. У прикладі нижче виконуватиметься анімація атрибуту value, щоб продемонструвати прогрес переміщення файлу на жорсткий диск.

var animateProgress = anime ({ targets: 'progress', value: 100, easing: 'linear'});

Висновок

Ви познайомилися з усіма варіантами вибору елементів в Anime.js, а також дізналися, як анімувати різні властивості CSS і атрибути, пов’язані з ними.

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

Переклад статті “JavaScript – Based Animations Using Anime.js, Part 1: Targets and Properties”

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


Коментарі 1

  • Anime.js найшвидша і легка у використанні бібліотека анімацій. Я використовую її для створення динамічних анімацій HTML і SVG елементів, в якій не потрібні всі можливості GSAP або інших великих бібліотек. Мені дуже подобається працювати з Anime.js, її можливості покривають багато способів застосування, синтаксис досить простий, а також за допомогою бібліотеки можна створювати плавні, красиві ефекти.

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

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