Від автора: нещодавно я дізнався про 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 тут.
