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

Введение в 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().

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Трансформации

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.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree