Упрощенные концепции именования веб-анимации

Встроенная поддержка веб-анимации впервые появилась в 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 , чтобы воспользоваться преимуществами этих новых имен. Наконец, не забудьте подписаться на группу веб-анимаций-изменений , чтобы узнавать о любых других изменениях.