API веб-анимаций предоставляет мощные примитивы для описания императивных анимаций из JavaScript — но что это значит? Узнайте о доступных вам ресурсах, включая демонстрации и практические занятия от Google.
Фон
По сути, API предоставляет метод Element.animate() . Давайте рассмотрим пример, который анимирует цвет фона от красного к зеленому.
var player = document.body.animate(
[{'background': 'red'}, {'background': 'green'}], 1000);
Этот метод поддерживается во всех современных браузерах, с отличным полифилом в качестве запасного варианта (подробнее об этом позже). Нативная поддержка этого метода — и его объекта проигрывателя — стала широко доступна в Chrome 39. Он также доступен в Opera и находится в активной разработке для Firefox. Это мощный примитив, который заслуживает места в вашем арсенале.
Кодлабс
Появляется все большее количество практических заданий по API веб-анимации . Это самостоятельные руководства, демонстрирующие различные концепции API. В большинстве таких заданий вы будете брать статический контент и дополнять его анимационными эффектами.
Эти практические задания , а также связанные с ними ссылки и ресурсы, — лучшее место для начала, если вы хотите понять новые примитивы, доступные вам в веб-анимации. Чтобы получить представление о том, что вы можете создать, посмотрите этот эффект раскрытия, вдохновленный Android.
Так что, если вы только начинаете, то дальше искать не нужно!
Демонстрации
Если вы ищете вдохновение, обязательно посмотрите демонстрационные примеры веб-анимаций в стиле Material Design, исходный код которых размещен на GitHub . В них демонстрируются различные потрясающие эффекты, и вы можете просмотреть исходный код каждого примера прямо в коде.
В демонстрационных версиях можно увидеть красочную вращающуюся галактику , вращающуюся Землю или даже просто различные эффекты, примененные к обычному элементу.
Полиэфирный наполнитель
Для обеспечения отличной поддержки во всех современных браузерах можно использовать библиотеку полифилов. API веб-анимации уже сейчас предлагает полифил , который обеспечивает совместимость со всеми современными браузерами, включая Internet Explorer, Firefox и Safari.
Если вы настроены на эксперименты, можете использовать полифил web-animations-next, который также включает в себя функции, еще не доработанные до конца, такие как компонуемые конструкторы GroupEffect и SequenceEffect . Для сравнения двух полифилов см. домашнюю страницу .
Для использования любого из этих полифилов в вашем коде у вас есть несколько вариантов.
Используйте CDN, например cdnjs , jsDelivr , или настройте таргетинг на конкретный релиз через rawgit.com.
Установка с помощью NPM или Bower.
$ npm install web-animations-js $ bower install web-animations-js ```
Во всех случаях вы можете просто добавить полифилл в тег <script> перед любым другим кодом.
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
document.body.animate([
{'background': 'red'},
{'background': 'green'}
], 1000);
</script>
Другие ресурсы
Если вы хотите ознакомиться с более подробным техническим описанием, обратитесь к спецификации W3C .
Дэн Уилсон также написал отличную серию статей о веб-анимации , в том числе о том, как использовать её вместе с новым свойством CSS motion-path . Примеры использования motion-path можно найти в документации Эрика Виллигерса .