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

От автора: недавно я узнал про 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 здесь.

Автор: Thom

Источник: https://www.gatherdigital.co.uk/

Редакция: Команда webformyself.

Комментарии Вконтакте: