Введення в Web Animations API

18

Від автора: нещодавно я дізнався про Web Animations API – функцію в сучасних браузерах для створення анімації, яку ви створюєте в CSS і JS. Для складної анімації ви, швидше за все, захочете використовувати потужний інструмент, однак прості затемнення і руху можна робити і з допомогою базового web API.

На момент написання статті функціональність експериментальна і не доступна ні в одному браузері. Підтримку в IE10 і вище можна отримати через polyfill. API вже доступний, але полифил буде повертатися до нативним функцій для підвищення продуктивності.

Базовий синтаксис для анімації елемента

element.animate(keyframes, options);

keyframes – опис проміжних станів, можна задавати в різних форматах. Options – об’єкт з властивостями, що описують такі речі, як тривалість, затримка і т. д. Синтаксис схожий на jQuery і velocity.js.

Плавне загасання і поява

element.animate([
{opacity: 0},
{opacity: 1},
], {
duration: 1000,
iterations: Infinity,
direction: «alternate»,
});

Задасть анімацію в 1 секунду. Iterations задано в Infinity, щоб анімація повторювалася, а direction встановлений в alternate для правильного закінчення анімації.

Пом’якшення

element.animate({
marginLeft: [«0px», «500px»],
}, {
duration: 1000,
iterations: Infinity,
easing: «cubic-bezier(.42,1.52,.98,.05)»,
});

Опція пом’якшення дозволяє задавати пом’якшення CSS типу ‘linear’, ‘ease’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’ і т. д. Функція обмежена, так як для пом’якшення не можна передати довільну JS функцію. В CSS є потужний інструмент пом’якшення — cubic-bezier().

Трансформації

element.animate({
transform: [
«scale(1) translate(0, 0) rotate(0deg)»,
«scale(2) translate(100px, 0) rotate(90deg)»
],
},{
duration: 500,
iterations: Infinity,
direction: «alternate»,
});

Комбінування трансформацій, схоже, працює! Дуже корисно. Начебто навіть працює 3D трансформація.

SVG

element.animate({
strokeWidth: [1, 5],
}, {
duration: 1000,
iterations: Infinity,
});

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

Кольори

element.animate({
backgroundColor: [«#405″,»#298″,»#fe3»],
}, {
duration: 1000,
iterations: Infinity,
direction: «alternate-reverse»,
});

Зручно створювати плавні трансформації квітів. І звичайно, анімації можна вішати на події та робити інші дурні речі.

Базовий web API досить примітивний, але найчастіше його вистачає. Для роботи з SVG я рекомендую використовувати d3. Для чогось більш складного: високопродуктивна графіка доступна в PIXI.js, react-motion дасть вам корисну декларативну анімації. Інші опції залежать від того, що вам потрібно. Я використовував одну цікаву бібліотеку з чудовим інструментом розробника – mojs.

Детальніше про Element.animate() тут. Інші можливості Web Animations API тут.