От автора: недавно я узнал про Web Animations API – функцию в современных браузерах для создания анимации, которую обычно вы создаете в CSS и JS. Для сложной анимации вы, скорее всего, захотите использовать мощный инструмент, однако простые затемнения и движения можно делать и с помощью базового web API.
На момент написания статьи функциональность экспериментальная и не доступна ни в одном браузере. Поддержку в IE10 и выше можно получить через polyfill. API уже доступен, но полифил будет возвращаться к нативным функциям для повышения производительности.
Базовый синтаксис для анимации элемента
| 1 | element.animate(keyframes, options); |
keyframes – описание промежуточных состояний, можно задавать в разных форматах. Options – объект со свойствами, описывающими такие вещи, как длительность, задержка и т.д. Синтаксис похож на jQuery и velocity.js.
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнееПлавное затухание и появление
| 1 2 3 4 5 6 7 8 | element.animate([ {opacity: 0}, {opacity: 1}, ], { duration: 1000, iterations: Infinity, direction: "alternate", }); |
Задаст анимацию в 1 секунду. Iterations задано в Infinity, чтобы анимация повторялась, а direction установлен в alternate для правильного окончания анимации.
Смягчение
| 1 2 3 4 5 6 7 | 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 дней
Узнать подробнее| 1 2 3 4 5 6 7 8 9 10 | 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
| 1 2 3 4 5 6 | element.animate({ strokeWidth: [1, 5], }, { duration: 1000, iterations: Infinity, }); |
Метод animate только интерполирует значения стилей, поэтому поддержка SVG сильно ограничена, так как большая часть рисованных значений в SVG это атрибуты элемент. Используйте для этого что-нибудь еще.
Цвета
| 1 2 3 4 5 6 7 | 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.
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнее
Практика HTML5 и CSS3 с нуля до результата!
Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3
Получить
