Мария Мироненкова

Веб-анимация вносит большой вклад в улучшение пользовательского опыта. Простые анимации из меняющихся картинок создать несложно. Но иногда возникают более интересные задачи — например, «оживление» персонажа. Меня зовут Маша, я дизайнер в Selectel. В этой статье расскажу, как создать сложную анимацию с использованием Lottie и After Effects. Как и зачем использовать 2D-анимацию В вебе анимацию удобно использовать, чтобы создавать «живые» иконки, кнопки, стикеры в Telegram, рекламные HTML-баннеры, интерактивные элементы пользовательского интерфейса и многое другое. Все это позволяет юзеру лучше ориентироваться в контенте и вызывает у него положительные эмоции. Пример анимации рекламного баннера. Мы в Selectel предпочитаем работать с After Effects (AE), поскольку это одна из самых функциональных и универсальных программ в мире моушн-дизайна. Другими словами — это база. Знакомимся с Lottie Lottie — это инструмент для создания анимаций с открытым исходным кодом, разработанный Airbnb. Позволяет веб-разработчикам использовать анимацию, созданную в Adobe After Effects. Экспорт осуществляется в виде JSON-файлов. Эти файлы можно визуализировать в режиме реального времени в браузере с помощью проигрывателя Lottie — он представляет собой JavaScript-библиотеку. Главное преимущество Lottie в том, что он позволяет использовать векторную анимацию в интернете. Это означает, что она не зависит от разрешения и масштабируется без потери качества. Кроме того, анимация Lottie имеет меньший размер файла по сравнению с GIF-файлами или видео. Это делает ее идеальным инструментом для повышения производительности веб-сайта. Начало работы Для экспорта анимации из Adobe After Effects вам потребуется установить плагин Bodymovin от Adobe или LottieFiles от Airbnb. Bodymovin.Вы можете скачать его либо с официального сайта Adobe Exchange, либо с GitHub. LottieFiles. Скачать можно бесплатно с официального сайта Lottie. Исходные файлы для будущей анимации можно отрисовать в Adobe Illustrator, Sketch или Figma — кому как удобно. Однако для экспорта иллюстраций из Sketch или Figma нужен специальный плагин для After Effects. Например, Overlord от Adam Plouff или AEUX от Adam Plouff и Google SUMux. Подробнее о работе этих плагинов расскажем в другой статье. Создание анимации в After Effects Производим экспорт файлов для анимации. Вот что можно сделать, если вы работаете в Adobe Illustrator и у вас нет возможности использовать плагин Overload. 1. Обязательно разбейте иллюстрацию на отдельные слои, которые будут задействованы в анимации. Не забывайте задавать каждому слою имя — в дальнейшем это облегчит процесс анимирования. Разбиваем изображение на слои. 2. Импортируйте файл Adobe Illustrator как Composition в Adobe After Effects. Импорт файла в After Effects. 3. Переведите все импортированные слои в Shapes. Если этого не сделать, при экспорте JSON вы потеряете визуальную часть анимации из-за привязки к файлу Adobe Illustrator. Конвертация Ai-файла в Shapes. Три важных пункта, которые нужно учитывать при создании анимации для Lottie. Избегайте растровой графики. Для масштабируемости используйте как можно больше векторной графики. Ограничьте эффекты. Не все функции After Effects поддерживаются Lottie. Поэтому избегайте сложных эффектов: 3D-слоев, выражений или определенных фильтры. Проверьте свою анимацию. Перед экспортом убедитесь, что ваша анимация воспроизводится плавно и оптимизирована для веб-производительности. Обязательно изучите таблицу от Airbnb — там представлены поддерживаемые функции JSON для определенной платформы. Когда работа с анимацией закончена, приступаем к экспорту. Экспорт Lottie в Bodymovin Плагин расположен во вкладке Window → Extensions → Bodymovin. На панели Bodymovin выберите композицию, которую хотите экспортировать. Укажите папку, в которой вы хотите сохранить JSON-файл. Нажмите кнопку Render. Расположение плагинов в АЕ. Экспорт Lottie с помощью плагина Bodymovin. Для проверки корректности анимации можно использовать Bodymovin Player или Preview Lottie animation. Экспорт Lottie в LottieFiles Процесс похожий, но более муторный. Чтобы воспользоваться плагином, авторизуйтесь на сайте. Далее в After Effects перейдите в раздел Window → Extensions → LottieFiles. Поставьте галочку напротив композиции, укажите путь сохранения файла и нажмите Render. Файл экспортировался в формат Lottie. Экспорт LottieFiles. После этого откроется предпросмотр — убедитесь, что все работает исправно. Нажмите кнопку Save to workspace, выберите рабочее пространство и кликните по Save. Далее перейдите на сайт и сохраните файл в формате JSON. Проверка на сайте и экспорт JSON. Интеграция анимации на веб-сайт Чтобы реализовать анимацию Lottie на сайте, вам потребуется библиотека Lottie.js . Эта JavaScript-библиотека позволяет визуализировать и управлять анимацией в режиме реального времени. Шаг 1: Подключение Lottie библиотекиВы можете загрузить библиотеку с GitHub Lottie или использовать ссылку CDN в вашем HTML-файле: Шаг 2: Создание контейнера для анимации Создайте div или другой элемент-контейнер, в котором вы хотите отобразить анимацию. Шаг 3: Загрузка JSON-файла с анимацией Используйте JavaScript для загрузки JSON-файла в контейнер. Вот базовая реализация: Этот код инициализирует анимацию Lottie и устанавливает ее в режим непрерывного повторения и воспроизводит сразу после загрузки страницы. Настройки анимации Одна из лучших особенностей Lottie — гибкость. Всего несколько строк JavaScript-кода позволяют управлять воспроизведением анимации и настраивать ее внешний вид. Управление воспроизведением Можно управлять запуском, остановкой или приостановкой анимации в зависимости от действий пользователя. Например, вы можете запускать анимацию при наведении курсора на кнопку: Синхронизация с прокруткой Можно синхронизировать анимацию Lottie с прокруткой, сделав ее более интерактивной. Например, вы можете запустить анимацию, когда пользователь прокручивает страницу: Цикл и управление скоростью Lottie позволяет легко управлять циклом и скоростью анимации. Например, вы можете настроить скорость воспроизведения анимации: Подсказка animation.play() — запуск анимации animation.pause() — пауза анимации animation.stop() — остановка анимации и возврат к начальному состоянию animation.setSpeed(speed) — установка скорости анимации Использование Lottie с React Lottie легко интегрируется в приложения React с помощью компонентов React Lottie. Приведу простой пример. Этот код настраивает простой компонент React, воспроизводящий анимацию Lottie. Используя хуки useEffect и useRef, вы можете легко управлять жизненным циклом анимации Lottie. Такой подход полезен для создания интерактивных пользовательских интерфейсов в современных веб-приложениях. На что обратить внимание в работе с Lottie Lottie — мощный инструмент для веб-анимации. Однако важно следовать передовым практикам, чтобы не снижать производительность и доступность. Оптимизируйте JSON-файлы. Анимации Lottie обычно легкие по весу, но сложные анимации все равно могут создавать большие JSON-файлы. Чтобы анимация была быстрой и отзывчивой, избегайте ненужных слоев и эффектов в After Effects. Используйте анимацию с умом. Анимация — отличный способ улучшить UX. Но чрезмерное использование может замедлить работу сайта и перегрузить пользователей. Используйте анимацию Lottie там, где она наиболее ценна. Обеспечьте кроссбраузерную совместимость. Анимации Lottie отображаются в формате SVG. Он поддерживается большинством современных браузеров. Однако всегда проверяйте анимацию в разных браузерах и на разных устройствах. Это поможет убедиться в ее корректной работе. Для старых браузеров рассмотрите запасные решения или более простые варианты анимации. Например, использование резервных GIF-файлов или статических изображений. Проверьте доступность анимации. Убедитесь, что анимация не мешает работе программ чтения с экрана или навигации с помощью клавиатуры. Учитывайте предпочтения пользователей. Можно отключать анимацию для пользователей, которые могут испытывать дискомфорт от движения. Что в итоге С Lottie вы можете свободно экспериментировать с интерактивной и сложной анимацией, которая масштабируется, адаптивна и легко интегрируется в любой веб-проект. Удачи в создании творческих проектов!