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

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

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

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

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

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

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

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

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

Плавное затухание и появление

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

Смягчение

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

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

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

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

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

Комбинирование трансформаций, похоже, работает! Очень полезно. Вроде бы даже работает 3D трансформация.

SVG

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

Цвета

Удобно создавать плавные трансформации цветов. И конечно, анимации можно вешать на события и делать другие глупые вещи.

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

Подробнее о Element.animate() здесь. Другие возможности Web Animations API здесь.

Автор: Thom

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

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

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

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

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

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

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

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree