Я не збираюся розбирати все бібліотеки на запчастини і копатися в коді. Замість цього я буду розглядати всі бібліотеки з точки зору людини, який в основному працює з CSS, але хотів би дізнатися, що йому може запропонувати JS в плані анімації DOM. Тому я буду шукати інструменти, які відмінно маніпулюють DOM, динамічно додаючи і видаляючи CSS стилі і / або класи для створення анімації, з синтаксисом, який буде знаком CSS розробнику.
Анімація в інтернеті
Як пояснює Сара Драснер, в веб-анімації потрібно розрізняти анімацію інтерфейсу / користувацького досвіду і незалежну анімацію.
Дослідження довело, що людина набагато краще сприймає світ на основі рухомих зображень. Тобто ми краще розуміємо і засвоюємо інформацію, коли вона представлена у вигляді чогось рухомого, а не в формі простих зображень або серії статичних зображень.
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
На противагу цьому незалежна анімація ... «Використовується для ілюстрації концепції в тілі сторінки, разом з нею або окремо.» Сара Драснер - зі слайдів з конференції по CSS
Сара ілюструє свою думку в CodePen демо.
Різниця дуже важлива. Під час анімації інтерфейсу ви намагаєтеся допомогти користувачам виконати певні дії, які узгоджуються з цілями сайту. А при створенні незалежної анімації ви максимально повно намагаєтеся розкрити певну концепцію.
Проте, обидва типи анімації повинні приносити людям задоволення. Ось чому при створенні анімації все впирається в продуктивність і доступність. Ці фактори є наслідком анімації, яка буде захоплювати, дратувати або навіть заподіювати біль.
Сьогодні CSS може нам запропонувати плавні переходи і анімацію. Однак JS досі займає першість в питанні створення анімації. Але чому? Ми вже зараз можемо робити анімацію на чистому CSS, навіщо комусь використовувати для цього JS?
Щоб допомогти вам у виборі між CSS і JS Рейчел Наборс склала список відмінностей. Анімація може бути:
Статичної: анімація від початку і до кінця проходить без будь-якої логіки відгалуження. Як приклад можна привести завантажувачі на CSS. Таку анімацію можна написати на чистому CSS;
Зі збереженням стану: хороший приклад - сайдбар, який відкривається і закривається при натисканні на кнопку. Такий тип анімації можна написати на CSS з дрібними вкрапленнями JS для додавання і видалення класів, що відповідають за стан анімації;
Динамічної: така анімація може закінчуватися по-різному. Це залежить від дій користувача, подій в DOM, станів анімації інших елементів в документі і т.д. Такий тип анімації можна створити за допомогою CSS, тут ваш кращий друг - JS.
Крім динамічної анімації JS можна використовувати, якщо ви потрапили в одну з наступних ситуацій:
вам потрібно зчепити або розбити анімацію на більшу кількість елементів. В такому випадку кожна анімація повинна починатися після завершення попередньої. Це можна зробити і на чистому CSS, прописавши всюди властивість delay. Але якщо вам знадобиться замінити лише одне значення, вкрай незручно переписувати всі інші;
ви хочете анімувати SVG графіку. Тут головний мінус в тому, що CSS анімація в SVG неоднаково підтримується у всіх браузерах;
якщо ваш проект повинен підтримувати старі браузери, де не працює CSS анімація, надійне рішення на JS забезпечить хорошу підтримку.
Перспективна заміна: Web Animations API
W3C працює над специфікацією, яка об'єднає разом CSS, SVG і JS анімацію в один уніфікований мову без необхідності підключення додаткових JS бібліотек. API називається Web Animations і відмінно підходить для створення динамічної анімації, де CSS не може нічого протиставити. Можете прочитати корисну вступну статтю в Web Animations API від Дадлі Сторі прямо на сайті SitePoint.
Робота над Web Animations API ведеться досить стійкими темпами, а для браузерів, які не підтримують API, є Поліфем.
Звучить все круто, і я активно закликаю всіх експериментувати з WAAPI. Проте, на момент написання статті підтримка в браузері різношерста, а в специфікацію ще можуть бути внесені зміни. Так що якщо WAAPI прямо зараз не підходить для вашого проекту, можете переключитися на JS бібліотеки.
Бібліотеки для динамічної анімації DOM
У мережі повно JS бібліотек для анімації. На момент написання статті найпопулярнішими вважалися GreenSock або GSAP (GreenSock Animation Platform) і Velocity.js.
Головні можливості Anime
Назва Anime походить від японської анімації, комп'ютерної та ручної Anime.js ... «гнучка, але легка JS бібліотека для анімації. Працює з CSS, Individual Transforms, SVG, атрибутами DOM і JS об'єктами. »
Anime.js підтримує такі браузери: Chrome, Safari, Opera, Firefox, Internet Explorer 10+
Стільки бібліотек, чому саме Anime?
«GSAP здатний на набагато більшу, ніж Anime. Але ця бібліотека набагато важче. Моя мета була - зберегти простоту API, зосередитися на тому, що мені реально потрібно (кілька таймингов, функції анімації, елементи управління відтворенням ...), підтримуючи максимально низьку вагу (9Кб в мініфіцірованном вигляді). »
Hacker News
Якщо коротко, Anime відмінно підійде вам, якщо вам потрібно створити динамічну анімацію HTML і SVG елементів, в якій не потрібні всі можливості GSAP або інших великих бібліотек.
Як використовувати Anime.js
Нижче я записав пару рядків коду, що ілюструють як підключити Anime.js. Більшість анімації буде загальмовано в демонстраційних цілях.
Підключення Anime.js нічим не відрізняється від JQuery або будь-який інший JS бібліотеки.
Скачайте файл .zip зі сторінки проекту на GitHub. витягти файли і пропишіть anime.min.js в тезі script всередині html:
Або можна зробити це в npm або bower:
Одна анімація на одному елементі: стрибучий м'яч
Після установки Anime.js в проект можна почати з самого простого типу анімації: просто один елемент, м'яч, що скаче вгору і вниз. Перший крок - викликати anime, передавши об'єкт з набором налаштувань анімації. Стандартна структура:
Тепер необхідно конкретизувати об'єкт, наповнивши його інструкціями про те, що анімувати, вигляді анімації, її тривалості тощо
Властивість targets відповідає в Anime за елемент, який необхідно анімувати. Можна вказати CSS селектор, як це зробив я вище, або один з варіантів нижче:
елемент DOM, наприклад, document.querySelector ( '. ball');
Nodelist, наприклад, document.querySelectorAll ( '. Ball');
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
JS масив, наприклад, [ '.ball'].
Якщо у властивості targets необхідно прописати більш одного значення, тобто ви збираєтеся застосувати анімацію до кількох елементів, можна використовувати масив:
Друге властивість в прикладі вище переміщує елемент по вертикалі за допомогою translateY, ця властивість буде знайоме тим, хто працював з CSS. Тіффані Браун і інші розробники радять використовувати translate і scale для переміщення і зміни розмірів елементів, а не властивості, що відповідають за позицію елемента, ширину або висоту. Такий підхід підвищує продуктивність і якість анімації, так як сторінка в переглядачі перебудовується заново.
Наступне властивість в прикладі вище - duration. Воно відповідає за тривалість анімації в Anime. Якщо у вас в різні проміжки часу задіяно кілька анімацій, вам також знадобиться властивість delay.
Властивість loop в Anime відповідає за кількість повторень анімації. За замовчуванням воно задано в false, тобто анімація запускається один раз. Анімацію можна зробити цикл за допомогою значення true, також можна задати точне число повторень, вказавши необхідну кількість.
Властивість direction, представлене як в CSS, так і в Anime, можна встановити в ті ж значення, що є в CSS двійнику: normal, reverse і alternate. Останнє значення перемикає хід анімації з нормального на протилежний, відмінно підійде для стрибаючого м'яча.
І нарешті, остання властивість в коді - easing. Швидкість анімації повинна бути постійною? Може бути, анімація повинна починатися повільно і прискорюватися до кінця? Чи потрібно в кінці додати відскік? Правильна функція анімації - один з ключових інгредієнтів відполірованою і ефектною анімації.
Всі функції анімації можна подивитися за допомогою коду нижче:
Додаємо другу анімацію до стрибати м'ячу
Скажімо, ви хочете, щоб м'яч злегка стискався при ударі об нижню межу контейнера. В Anime це можна зробити, додавши спеціальні параметри анімації в формі JS об'єкта. На прикладі м'яча, ось так це можна зробити:
У коді вище додано нову властивість scaleX, яке робить м'яч ширше. Саме значення задається у формі об'єктного литерала з певними ключами, за допомогою яких можна контролювати анімацію.
Ключ value дозволяє змінювати ширину елемента по горизонтальній осі, а duration і delay відповідають за тривалість анімації і точку старту після завершення попередньої анімації.
Якщо проінспектувати елемент в улюбленій панелі розробника, можна побачити, як Anime анімує елемент, додаючи інлайновий атрибут style і динамічно оновлюючи значення властивості transform.
Послідовна анімація двох елементів: штовхає м'яч
Код нижче - один із прикладів того, як можна анімувати два елементи. У нашому випадку це два зображення. Друга анімація починається після завершення першої.
М'яч починає рухатися тільки після удару. У Anime.js можна вказати додаткову анімацію за допомогою методу complete (), в якому, в нашому випадку, зберігається другий об'єкт з інструкціями для анімації м'яча.
Звичайно, в CSS можна створити статичну версію анімації. Знадобиться кілька keyframe'ов і химерна кубічна функція Безьє. В такому випадку JS взагалі не потрібен, а анімація буде плавна і буде працювати нативної. Демо на чистому CSS:
Включаємо, ставимо на паузу і перезапускаємо анімацію
Anime.js дозволяє запускати, зупиняти і перезапускати анімацію за допомогою методів .play (). pause () і .restart (). Наприклад, ось так можна контролювати анімацію удару м'яча.
У коді потрібно зробити пару зауважень:
щоб контролювати і удар, і м'яч за допомогою кнопок, я створив два різних об'єкта. Можна було б вкласти анімація м'яча в анімацію удару, але досвід показав, що тоді кнопка контролює тільки головну анімацію, тобто удар;
щоб анімація автоматично не запускати після повного завантаження сторінок, необхідно задати autoplay в false;
і нарешті, щоб запустити анімацію, досить викликати метод .play () на об'єктах kickBall і movingBall.
Запуск анімації і паузу можна швидко відтворити за допомогою CSS властивості animation-play-state і щіпки JS. Однак цим способом не вийде відтворити повторний запуск анімації після її завершення або запустити зворотний анімацію з будь-якої точки.
Анімуємо інлайновие атрибути SVG за допомогою Anime.js
В останньому демо показано, як анімувати атрибути інлайновой SVG графіки. Цього разу в якості прикладу буде милий кошеня, грати з м'ячем.
У демо використовуються класи CSS для різних шляхів і форми, з яких намальований SVG кошеня. Так набагато легше шукати елементи в коді.
Ось так можна анімувати очей кота:
Код вище опускає очей кота, змінюючи значення атрибуту cy кола - зіниці кота.
Якщо ви помітили, то очі рухаються послідовно. Я спеціально зробив так, щоб показати вам ще один спосіб створення послідовної анімації в Anime.js. Властивість delay може бути числом, але також і функцією. Якщо використовувати функцію, як в коді вище, ви можете програмно контролювати старт анімації. Функція перевіряє, якщо елемент, який необхідно анімувати, перший (на нульовій позиції в масиві targets), тобто ліве око, то анімація буде з затримкою в 300ms. Якщо елемент не перший, то затримка буде результатом множення індексу елемента (тобто 1) на 500ms.
висновок
Я почав цю статтю з короткого огляду, як анімація використовується в інтернеті. Далі ми обговорили, коли використовувати JS, а коли CSS анімацію. Побіжно пройшлися по Web Animations API.
Також я представив вам Anime.js, першу бібліотеку в цій серії. Я показав вам її можливості і створив демо.
Мені дуже подобається працювати з Anime.js: її можливості покривають багато способів застосування, синтаксис досить простий, а також за допомогою бібліотеки можна створювати плавні, красиві ефекти.
Для тих, хто раніше не знав про цю бібліотеку, скажу, що єдина документація - це файл README.md на GitHub.
У розділі питань на GitHub ви знайдете деякі відповіді для себе. За темою активно стежить творець Anime, Джуліан Гарн'єр.
Редакція: Команда webformyself.
Сучасні тенденції і підходи в веб-розробці
Дізнайтеся алгоритм швидкого професійного зростання з нуля в сайтобудування
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі