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