Встроенная поддержка веб-анимации впервые появилась в Chrome 36 и была обновлена с помощью управления воспроизведением в Chrome 39 . Метод Element.animate() можно использовать для запуска императивной анимации непосредственно из JavaScript, а возвращаемый им объект можно использовать для управления воспроизведением этих анимаций. Эти методы подробно описаны в текущем проекте спецификации Web Animations W3C .
В активной разработке находится полифилл , который отслеживает все встроенные функции веб-анимации и поддерживается во всех современных браузерах. Эти основные методы готовы к использованию прямо сейчас и заслуживают того, чтобы стать частью вашего набора инструментов для создания богатого опыта, использующего анимацию (например, для веб-приложения Google I/O 2015 .
Изменения в конструкторе и группах
Спецификация Web Animations также описывает группы и последовательности , а также конструкторы для анимаций и игроков. Они были доступны в полифиле web-animations-next , который был разработан для демонстрации функций, которые все еще обсуждаются и еще не реализованы изначально. В ответ на отзывы разработчиков команда разработчиков веб-анимации переименовывает эти функции, чтобы они были более понятными.
FXTF недавно встретилась в Сиднее, Австралия, и обсудила именование , поскольку ряд разработчиков высказали обоснованные замечания о том, что некоторые названия могут сбивать с толку. В результате были согласованы следующие изменения в названиях:
- Анимация становится KeyframeEffect
- AnimationSequence становится SequenceEffect
- AnimationGroup становится GroupEffect
- AnimationPlayer становится Animation
Помните, что хотя анимации и их проигрыватели изначально доступны в Chrome и как часть полифилла, в настоящее время они создаются непосредственно с помощью метода Element.animate() . Существующий код, использующий метод Element.animate() не потребует никаких изменений.
Новые имена более точно отражают поведение каждого объекта. KeyframeEffect , например, описывает эффекты на основе ключевых кадров, которые могут быть нацелены на элементы HTML. Напротив, новый объект Animation представляет анимацию в одном из многих состояний (например, воспроизведение, пауза и т. д.).
Исходный кодЭффект
Если вы используете части черновой спецификации через полифил web-animations-next, вам придется обновить свой код в течение периода прекращения поддержки, чтобы отразить эти новые имена. В соответствии с политикой изменения полифилов мы стремимся поддерживать старую версию в течение трех месяцев и предоставлять консольные предупреждения, если на вашем сайте используются устаревшие функции или имена.
Если вы хотите опробовать эти функции, следите за выпуском полифилла v2 , чтобы воспользоваться преимуществами этих новых имен. Наконец, не забудьте подписаться на группу веб-анимаций-изменений , чтобы узнавать о любых других изменениях.