Види анімації на верстці: властивості, особливості, приклади коду

Frontend-розробник нашої компанії Данило Абрамов розповідає, як оптимізувати анімації та робити їх плавними. У статті розберемо CSS Transition, CSS Animation, SVG animation, JS-анімацію, JS canvas та JS. WebGL / ThreeJs.

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

Види анімацій

Найпростіші та найпоширеніші види анімацій - CSS Transition і CSS Animation.

CSS Transition

Transition – це скорочена CSS-властивість, яка дозволяє керувати плавним переходом між двома станами елемента.

Властивість Transition складається з:

• transition-property - назва властивості, до якої застосовується ефект переходу.
• transition-duration - Тривалість переходу.
• transition-timing-function — тимчасова функція переходу (те, як будуть визначені проміжні значення для властивості, яка бере участь у переході).
• transition-delay – затримку перед початком переходу.

Плюси: Це найкращий спосіб (з погляду простоти та швидкодії), коли є лише два стани елемента залежно від однієї умови. Наприклад, при наведенні мишкою, при натисканні на елемент тощо.

Мінуси: transition не дозволяє змінювати властивості елемента, якщо станів більше двох. Також неможливо робити нескінченні анімації.

Особливості: у значенні властивості transition можна вказувати як окремі CSS-властивості зі своїми значеннями, і використовувати ключове слово all.Воно скаже браузеру використовувати перехід для всіх властивостей, які є усередині CSS-правила.

CSS Animation

Animation — скорочена CSS-властивість, що включає:

• animation-name - Назва.
• animation-duration - Тривалість.
• animation-timing-function - тимчасова функція (за аналогією з transition-timing-function).
• animation-delay – затримку перед початком.
• animation-iteration-count – кількість повторень.
• animation-direction - напрямок (можна запустити анімацію навпаки, починаючи з кінця).
• animation-fill-mode — те, як застосовуватимуться стилі ключових кадрів до і після закінчення анімації.
• animation-play-state — властивість, яка дозволяє поставити анімацію на паузу та продовжити з того місця, де вона зупинилася.

Щоб створити анімацію, потрібно описати директиву @keyframes з назвою анімації та описом ключових кадрів:

@keyframes shift < 10% < transform: translate3d(0, 0, 0); >20% transform: translate3d(-20px, 0, 0); >50% transform: translate3d(10px, 0, 0); >75% transform: translate3d(-7px, 0, 0); >100% transform: translate3d(0, 0, 0); >>

Для того, щоб використовувати цю анімацію, достатньо додати до елемента властивість animation з назвою анімації та її опціями:

У наступному простому прикладі при кліку на елемент JS додається і видаляється клас .is-animated, що включає і вимикає анімацію

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

Мінуси: якщо є якісь складні сцени, які використовують багато анімацій, що включаються поспіль, створення анімації за допомогою animation стає складним. Також важко буде це підтримувати.

Особливості: щоб застосувати анімацію до елемента, достатньо вказати лише два значення: ім'я та тривалість анімації. При цьому порядок значень практично не важливий. Важливо лише те, що перше значення часу – це тривалість, а друге – затримка перед початком анімації.

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

SVG animation

SVG можна анімувати двома способами: за допомогою CSS-анімації SMIL-анімації.

Анімація SVG за допомогою CSS нічим не відрізняється від звичайної animation. Ми також за допомогою @keyframes створюємо анімацію, описуємо в ній властивості, які змінюємо, та використовуємо її за потреби.

• якщо в SVG щось не вдалося анімувати за допомогою CSS-анімації,
• або потрібно встановлювати залежності між різними анімаціями (наприклад, запустити другу анімацію через 3 секунди після закінчення першої анімації),
• або потрібно плавно перетворити один вид SVG на інший, у всіх цих (і деяких інших) випадках необхідно використовувати SMIL-анімацію для SVG.

Так виглядає проста SMIL-анімація руху кола на кліку мишки:

1) Анімація SMIL + CSS. На CSS анімується зміна кольору та переміщення фігури, за допомогою SMIL фігура змінює свій контур.

2) Тут анімація повністю зроблена за допомогою SMIL

3) Ще один приклад морфінгу (зміна контуру SVG)

• SMIL анімація буде працювати навіть якщо вам потрібно вставити SVG за допомогою тега img або через background-image в CSS.
• За допомогою SMIL анімації можна анімувати атрибути, які не доступні для CSS-анімації. Наприклад, анімувати крапки у тезі , щоб створити ефект плавного переходу від однієї фігури в іншу.

Мінуси: По суті SMIL-анімація – це окрема специфікація зі своїми правилами та тонкощами, яку необхідно вивчати окремо від CSS.

Особливості: У SMIL-анімації дуже багато тонкощів, знати які можна тільки якщо впритул займаєшся саме цим видом анімації.

JS-анімація

Говорячи простою мовою, це плавна зміна стилів елемента через JavaScript. За допомогою JS анімації можна контролювати всі стилі елемента на будь-якому етапі анімації, змінювати їх залежно від умов. За допомогою чистого JS робляться анімації перемикання слайдів, розкриття-закриття акордеону, різні переміщення блоків за певними умовами та багато іншого.

1) Досить незвичайний слайдер

2) Анімація ефекту під час руху мишкою

Плюси: Анімація за допомогою JavaScript дозволяє зробити те, на що не здатна анімація CSS. Можна як завгодно маніпулювати елементами. Також у будь-якому місці анімації її можна уповільнювати, призупиняти, тощо.

Мінуси: JS-анімація часто більш ресурсозатратна для браузерів.

Особливості:

• якщо написати JS-анімацію неправильно, то є великий шанс, що на слабких пристроях вона гальмуватиме. Як цього уникнути, поговоримо нижче.
• для JS-анімацій є велика кількість готових бібліотек (наприклад, anime.js), які дозволяють створювати анімації швидше та ефективніше (особливо складні), ніж писати їх руками.

JS canvas

Canvas – це полотно. Тобто лише один тег у html-коді. При створенні анімації всередині canvas всі зміни відбуваються всередині одного тега.Все, що знаходиться всередині canvas, не існує в DOM-дереві. Але за допомогою JS ми можемо створювати, переміщати та змінювати будь-які елементи, які будуть перебувати в canvas.

Плюси: При створенні анімації всередині canvas браузеру не потрібно постійно змінювати та перераховувати всю сторінку, розташування елементів відносно один від одного тощо.

Мінуси: Як і всі попередні види анімацій, canvas дозволяє реалізувати лише 2D-графіку.

1) Анімація снігопаду

2) Гра змійка на canvas

JS. WebGL / ThreeJs

WebGL – технологія, яка додає до браузера 3D-графіку. Найпопулярніша бібліотека для роботи з WebGL (на даний момент) – three.js. Вона значно спрощує поріг входження в технологію WebGL. Завдяки підтримці 3d, за допомогою three.js часто робляться браузерні 3d ігри.

• На цьому сайті наведено приклади ігор, створених за допомогою three.js
• Земля (куля), де є інтерактивні точки. При натисканні на точки відкриваються описи.

Плюси: це єдина можливість створювати повноцінну 3D-анімацію у браузері.

Мінуси: навіть враховуючи, що three.js оптимізує анімацію, найчастіше анімація на three.js – це величезне навантаження на браузер, і на середніх та слабких комп'ютерах анімація гальмуватиме.

Як працюють анімації у браузері

Що відбувається у браузері, коли ми запускаємо анімацію? Як браузер перемальовує всі ці кадри? Які процеси відбуваються окрім просто перемальовування стилів? Знаючи відповіді ці питання, можна грамотно оптимізувати анімацію.

Ось 5 основних етапів, які проходить браузер під час анімації:

1) JavaScript. Браузер дивиться JavaScript на стилі на сторінці.

2) Style.З CSS для кожного елемента розраховуються стилі, які відповідають за зовнішній вигляд (розміри, відступи, кольори).

3) Layout. Браузер розраховує розташування кожного елемента відносно один одного. А також як вони впливають один на одного.

На всіх цих етапах браузер не малює елементів. Він лише зчитує їх характеристики.

4) Paint. На цьому етапі вже промальовуються всі елементи. Кожен піксель кожного елемента.

5) Composite. Відбувається перевірка, який елемент, на який наклався зверху. Наприклад, знизу фон, а поверх нього решта елементів.

Усі 5 етапів проходять за замовчуванням під час завантаження сторінки.

Під час анімації у браузері можуть бути три варіанти:

• Всі ці 5 етапів проходять тоді, коли ми змінюємо CSS-властивості, які розраховуються на процесорі (CPU) та впливають на розміри елемента, його розташування, зовнішні та внутрішні відступи. Це найгірший варіант.

• Якщо ми змінюємо властивості, які не впливають на розташування елемента (фон, тіні, колір тощо), то браузер проходить 4 етапи - 1, 2, 4, 5 (без третього, одного з найзатратніших, - етапу Layout ).
• Кращим варіантом анімацій з точки зору роботи браузера буде варіант, коли ми проходимо лише 1, 2 та 5 етап. (без етапів Layout та Paint). Це можливо, якщо використовувати властивості opacity та transform. opacity це просто прозорість, а transform фіксує область за елементом, і для нього перестає прораховуватися взаємодія з іншими елементами. Це дозволяє не перемальовувати всю сторінку.

Основні правила для успішної роботи анімацій

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

Наведу кілька методів оптимізації анімацій.

• З transition краще використовувати ключове слово all, а задавати конкретні властивості, оскільки у CSS-правиле надалі можуть додатися інші властивості, перехід між якими нам не потрібний. Також, коли використовується ключове all, браузер проходить за всіма властивостями CSS-правилі, визначаючи, які можна анімувати, а які ні. Це створює зайве навантаження, що незначно, але все ж таки впливає на швидкодію анімації.

• Використовувати властивості, зміна яких не змушує браузер перемальовувати всю сторінку, особливо все, що стосується розмірів.

• Виносити анімовані елементи на окремий шар, щоб анімація відбувалася за допомогою відеокарти. (transform: translateZ(0); або transform: translate3d(0, 0, 0); )

• використовувати властивість will-change, яка заздалегідь говорить браузеру про властивості, які будуть анімовані. При цьому браузер оптимізує анімацію, і, якщо потрібно, переносить рендеринг відеокарту. (Не слід використовувати для простої анімації, щоб не плутати браузер, на що потрібно, а на що не варто витрачати особливу увагу).

• Якщо елемент візуально відсутній на сторінці після або до анімації, необхідно його приховати за допомогою display: none або visibility: hidden, щоб звільнити ресурси браузера. Це повністю вимкне зчитування подій та зчитування анімацій.

• Якщо анімацій багато, краще запускати їх послідовно. Краще для цього не використовувати delay, тому що це рівнозначно одночасному запуску кількох анімацій, що з'їдає ресурси.

• На початку розробки анімацію слід тестувати на різних, особливо слабких, пристроях. Якщо анімація гальмує, можна змінити підхід або оптимізувати анімацію. Якщо ж це тестувати в кінці, то, можливо, доведеться все переписувати, що збільшить час розробки.

• Якщо використовуємо JS-анімацію, обов'язково потрібно використовувати функцію window.requestAnimationFrame(). У коді це виглядає так:

function step() < // код функції, який анімує елемент window.requestAnimationFrame(step); >window.requestAnimationFrame(step);

Ця функція викликається браузером щоразу, коли він починає перерахунок розташування всіх елементів, перегляду впливу JS, тобто коли проходить повний рендер. В ідеальних умовах це 60 разів на секунду. Але інтервали між цими викликами розраховуються браузером і залежать від навантаження на пристрій, від заряду батареї і т.п. Завдяки тому, що браузер сам викликає цю функцію, коли йому потрібно оптимізується швидкодія анімації.

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

Підсумок

Хочу звернути особливу увагу на те, що при створенні веб-анімації важливо думати про те, як з цим працюватиме браузер, що саме він робитиме. Наприклад, скільки разів і за який час він викликатиме події для запуску анімації. І про те, наскільки анімація зачіпає перемальовування блоків чи навіть усієї сторінки. За рахунок яких ресурсів комп'ютера виконуватиметься код (CPU чи GPU). По можливості не варто переускладнювати анімацію. Чим простіша анімація, тим вона продуктивніша. Анімація повинна бути прикрасою, але не заважати користувачам користуватися сайтом або додатком.

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