Lottie файлы что это

Обновлено: 06.07.2024

Вы создаете умопомрачительную анимацию с помощью After Effects и намереваетесь явить ее миру. Один из способов воплотить задуманное — использовать ее в качестве экрана-заставки или компонента загрузчика в приложении. Но на вашем пути возникает небольшая проблема: Adobe не разрешает это сделать.

И тут на помощь приходит библиотека lottie-react-native , позволяющая отрисовывать анимации в приложении React Native . А самое главное преимущество состоит в том, что для начала работы достаточно лишь минимального объема кода.

На основе материала статьи вы научитесь интегрировать библиотеку lottie-react-native в свой проект. Наша конечная цель выглядит так:

С задачами определились — за дело!

Начальные этапы

Инициализация проекта

В текущем проекте используется Expo. Инициализируем приложение React Native, выполняя в терминале следующую команду:

expo init lottie-tutorial

Установка зависимостей

lottie-react-native — для создания анимации;
lottie-ios — вложенная зависимость (peer dependency) для отрисовки графики на iOS.

npm install lottie-react-native lottie-ios@3.18

Этот этап подготовки пройден, и теперь нам нужны файлы активов.

Файлы активов

Вы можете воспользоваться собственной анимацией, экспортировав ее с помощью плагина Bodymovin . Но в данном руководстве мы поработаем с директорией Lottie Files . Она содержит множество бесплатной анимации, которую можно импортировать в проект. Нам интересны две из них: Lava Preloader и Switch Toggle .

Для получения этих активов скачиваем необходимые файлы в формате JSON:

Затем переносим файлы JSON в каталог assets.

Lottie: основы

В этом разделе вы узнаете об основных принципах этой технологии.

Простые анимации

Создаем файл SimpleAnimation.js, в котором пишем следующий код:

import LottieView from "lottie-react-native";

Теперь осталось только отобразить этот компонент на экране. Для этого в App.js пишем код:

export default function App() return (
<View style=> <SimpleAnimation /> </View> );
>

Объект статичен, поскольку его воспроизведение еще не задано. Приведем его в движение посредством свойства autoPlay:

Вот так все просто!

Анимации загрузчика

В этом разделе воспользуемся Coffee API для отображения данных на экране. В процессе их загрузки React Native займется отрисовкой анимации.

Создаем файл LoadingAnimation.js и для начала пишем в нем следующий код:

export default function LoadingAnimation() const [data, setData] = useState(null);

Строки 4–8. Получаем данные из API и сохраняем их в хуке data.
Строки 14–18. Компонент Item отвечает за отрисовку каждого элемента списка.

Далее добавляем к этому же файлу следующий код:

Строка 3. Проверяем, загружены ли данные (значение данных не равно null).
Строки 4–8. Отображаем массив data с помощью элемента FlatList.
Строки 10–15. Если же данные еще загружаются, отображаем анимацию загрузки.

Отлично! Код работает. Далее научимся управлять другими свойствами анимации.

Управление скоростью

Для изменения скорости требуется свойство speed.

<LottieView
speed=
//дальнейший код..

Скорость анимации увеличивается втрое.

Уменьшим скорость, установив отрицательное значение:

<LottieView
speed=
//дальнейший код..

Обработка завершения анимации

Lottie содержит свойство onAnimationFinish. Напишем функцию обратного вызова, которая будет выполняться по завершении анимации.

const [finish, setFinish] = useState(false);

Строка 11. По завершении анимации вызываем метод handleFinish, вследствие чего для хука finish устанавливается значение true.
Строка 13. Устанавливаем для свойства loop значение false, в результате чего Lottie выполняет анимацию только один раз.
Строка 16. Применяем условный рендеринг, чтобы указать на завершение анимации.

Взаимодействие с анимацией

В этом разделе вы узнаете об императивном API Lottie, обеспечивающим более детальное управление активом.

Воспроизведение и пауза

Проинструктируем Lottie запускать анимацию при нажатии пальцем на графические объекты и приостанавливать ее при его поднятии.

О библиотеке LottieFiles многие знают, но пробовать на практике не спешат. Статей на эту тему мало, поэтому я решила поделиться своим опытом создания анимации для мобильных приложений с помощью Lottie.

Без анимации в мобильных интерфейсах не обойтись. Она оживляет приложение, помогает пользователю ориентироваться в нем и получать отклик на свои действия, вызывает эмоции.

По типу взаимодействия можно разделить анимацию на несколько категорий:

микровзаимодействия — визуальные отклики на действия пользователя, анимация конкретных элементов интерфейса на экране, например, кнопки или иконки;
независимую графическую анимацию в пределах экрана, например, анимированная иллюстрация в онбординге или сплеш-скрине;
переходы — анимация, связывающая между собой два экрана.

Разбираемся в нюансах

LottieFiles это библиотека для iOS, Android, Web и Windows. В этой статье расскажу про особенности только для iOS и Android, так как специализируюсь на мобильных интерфейсах.

Маленький ликбез — библиотека состоит из файлов json, в которых закодирована анимация из Adobe After Effect. Плагин, который участвует в создании таких файлов, называется Bodymovin. Он имеет JavaScript движок и рендерит анимацию в режиме реального времени.

Вы можете воспользоваться пробной версией Adobe After Effect, если не работали с этой программой раньше. За неделю использования успеете протестировать и решить, нужна ли она вам.

Я проанализировала таблицу от Airbnb и выделила функции Adobe After Effect, которые поддерживаются и на iOS, и на Android. При создании анимации их нужно учитывать, чтобы получить на выходе json, который будет корректно отображаться на обеих платформах.

Сводная таблица с поддерживаемыми функциями для iOS и Android

Создаем Lottie-файлы

Дизайнер создает анимацию в Adobe After Effect, учитывая ограничения, затем экспортирует ее в json с помощью плагина Bodymovin. После этого нужно сделать тест файла в превью-сервисах — Bodymovin Player или Lottie Preview.

Продумайте анимацию заранее с учетом слоев. Ее можно создать с нуля в Adobe After Effect, а можно сначала отрисовать исходный файл в Adobe Illustrator или Sketch. Импорт в Adobe After Effect в этом случае могут упростить плагины:

(от Adam Plouff) для интеграции Adobe After Effect и Adobe Illustrator — для быстрого перемещения векторных форм между программами без импорта и организации файлов; (от Adam Plouff и Google SUMux) — для интеграции Adobe After Effect и Sketch, аналогичен Overlord. Скоро будет доступен для Figma!

Создание Shapes на основе векторных слоев файла Adobe Illustrator

Я воспользовалась готовыми иллюстрациями и подготовила кейсы, которые опираются на предложенную классификацию анимации. Для примера микровзаимодействия выбрана кнопка, для независимой графической анимации — иллюстрации к онбордингу. Также я попробовала сделать json для визуальной составляющей кастомного перехода между экранами.

Анимация в онбординге (источник изображений — Flaticon)

Анимация кнопки и анимация для перехода между двумя экранами

Подключаем библиотеку

Для того чтобы добавить в приложение анимацию, подключите библиотеку LottieFiles. Здесь можно узнать, как это сделать. В исполняемом коде для анимации можно задать размер, скорость воспроизведения и число проигрываний — это позволяет точнее настроить анимацию.

Все кейсы были протестированы и подключены — Lottie можно использовать для анимации разного назначения.

Подключение Lottie на iOS

Что новенького

Недавно Maxime Robinet совместно с Psycle Research запустили эксперимент Figma(love)Lottie, в котором попробовали использовать API Figma для демонстрации json на макетах.

Чтобы воспользоваться сервисом, проведите предварительные манипуляции с макетом в Figma. Разместите на нем группу слоев: контейнер для отображения анимации, параметры анимации в текстовых блоках (скорость и цикличность воспроизведения). Подробная инструкция тут.

Для демонстрации понадобятся json, персональный токен для доступа (можно получить в настройках аккаунта) и ссылка на макет экрана в Figma. Нужный мокап устройства добавится автоматически под разрешение макета. В итоге у вас получится ссылка, которой можно поделиться. Она будет работать около двух месяцев.

Figma(love)Lottie поможет вам демонстрировать json непосредственно в интерфейсе и производить настройку параметров анимации без помощи разработчика. Lottie Preview и Bodymovin Player лишены этих возможностей.

На практике?

Lottie может ускорить процесс разработки приложения. Время, затраченное на анимацию в проекте, контролируется дизайнером. Он создает, тестирует, настраивает анимацию и передает разработчикам. Функциональные спецификации здесь не требуются. Однако, по разным причинам, не для каждого мобильного приложения уместно подключать LottieFiles. Также команды разработки часто отказываются от этой библиотеки ввиду налаженных внутренних процессов, выходить за рамки которых обычно затруднительно. Хотелось бы попробовать LottieFiles в реальном проекте.

Тут можно скачать созданные мной json-ы и посмотреть их в Lottie Preview.

Всегда приятно, когда в приложении присутствуют анимации, однако, создаются они непросто. Процесс преобразования анимации, созданной дизайнером, в платформозависимый код является утомительным и вместе с тем сопряженным с вероятностью возникновения ошибок. Lottie является мобильной библиотекой анимаций, созданной Airbnb для iOS и Android, которая разбирает анимации Adobe After Effects (экспортируются как JSON) и обрабатывает их при помощи нативных анимационных API-интерфейсов. С Lottie начинающий дизайнер может создавать и запускать красивые анимации без необходимости в инженере, который бы кропотливо воссоздавал их вручную. Поскольку библиотека опирается на формат JSON, анимации получаются очень маленькими, но зато они могут быть очень комплексными. Анимации можно воспроизводить. Кроме того, позволяется изменять их размер, зацикливать, замедлять и даже очищать в интерактивном режиме.

Так как интегрировать вычурные анимации, а также обновлять и поддерживать их стало теперь предельно просто, я решил использовать Lottie для создания анимаций в каждом из моих приложений. У Lottie имеется ряд функций, встроенных в API, с тем чтобы сделать эту библиотеку более универсальной и эффективной. Она поддерживает загрузку файлов JSON через интернет, обладает дополнительным механизмом кэширования, и, помимо этого, позволяет управлять анимациями с помощью жестов. Из этой статьи Вы узнаете, как при помощи анимационного фреймворка Lottie создавать красивые анимации для приложений iOS, Android и даже Xamarin.Forms!

Добавление красивых анимаций с помощью Lottie

Прежде чем браться за код, нам следует сперва создать анимацию. Функции Lottie используют формат JSON, экспортируемый из Adobe After Effects, и преобразует его в нативную анимацию. Сперва создайте анимацию в Adobe After Effects. Затем используйте плагин bodymovin для After Effects, с тем чтобы экспортировать анимацию в формате JSON. Это послужит в качестве резервного хранилища для анимаций, которые будут загружены Lottie из кода.

Теперь пришло время добавить анимацию в мобильные приложения. Lottie для Xamarin распространяется через NuGet. Чтобы использовать Lottie в приложениях просто добавьте соответствующую версию пакета Lottie — iOS, Android или Xamarin.Forms — в проект.

Android

Lottie поддерживает Jellybean (API 16) и выше. Проще всего использовать ее с LottieAnimationView:

В 2017 году инженеры Airbnb увидели потенциал анимации на основе JSON и вместе с лидером анимации создали библиотеки IOS и Android, которые смогли бы отображать файлы JSON, которые назвали «Lottie». Вы можете прочитать больше об истории здесь. Разработчики в Airbnb оставили исходный код открытым и создали сообщество GitHub для общения с дизайнерами и инженерами.

LottieFiles — это независимая платформа от Airbnb, на которой дизайнеры могут загружать, тестировать, покупать и выгружать анимации.

Airbnb также являются создателями плагина LottieFiles для After Effects, который работает аналогично Bodymoving и позволяет нам просматривать анимацию, загружать её на платформу LottieFiles, сохранять на компьютере и т. д.

Приступим к работе

Для начала необходимо установить плагин, вы можете использовать Bodymovin или LottieFile.

Я создал для своего логотипа простую анимацию, которая будет отображаться в верхнем меню веб-сайта. Это дрон с вращающимися лопастями, поэтому я импортировал в слои файлы Illustrator, сделал спиральные 3D-слои и повернул их.

Будьте внимательны, не все эффекты поддерживаются этими форматами файлов. На сегодняшний день 3D-слои не поддерживаются. Поэтому, прежде чем делать анимацию, стоит проверить поддержку.

Следует заострить внимание

Создание анимации для Интернета — это не то же самое, что и создание традиционного видео. Мы должны принять во внимание несколько параметров настройки и форматирования, о которых нам никогда раньше не приходилось думать.

Файлы JSON должны быть как можно более компактными для мобильных продуктов;
Используйте свои навыки After Effect, чтобы избежать лишних ключевых кадров, например, путем родительских функций вместо добавления ключевого кадра на каждом слое;
Избегайте использования ключевых кадров пути, поскольку они создают очень большой документ из преобразования всей вершины из пути;
Лучше всего избегать покачивания, автоматической трассировки и аналогичных методов, которые создают большое количество ключевых кадров. Создание такого большого файла может сделать файл JSON очень большим и негативно повлиять на производительность;
Преобразуйте любой слой Illustrator, EPS, SVG или PDF для формирования слоёв в After Effects, в противном случае это приведёт к ошибке;
Экспорт в 1X при экспорте файла каждый пиксель на иллюстрации будет переведён в точки для IOS и DPS для Android; Вот набор метрик устройств в DPS, которые Google собрал вместе;
Lottie пока не поддерживает выражения или эффекты;
Режимы наложения, а конкретно: «Умножение», «Экран» или «Добавить» пока не поддерживаются, а также не отображаются с помощью Luma;
Стили слоёв (тень, наложение, обводка. ) пока не поддерживаются; Нули могут быть использованы, но для их работы необходимо включить видимость и изменить непрозрачность до 0%.

Зная все нюансы, приступим к работе

Импортируйте слои, откройте композицию, выберите все слои, щелкните правой кнопкой мыши и выберите: Создать / создать фигуру из векторных слоёв.

Это создаст векторные слои, которые не доставят нам хлопот при экспорте в Lottie.

Нам нужно удалить AI-файлы и работать только с векторными слоями.

Я хотел анимировать лопасти в 3D, но поскольку они не поддерживаются, мне пришлось делать это «традиционным способом» и поэтому я симулировал вращение, анимируя размер в X (ширина).

После того, как воссоздать нужную скорость, я создал нулевой объект, чтобы переместить весь логотип и заставить его «взлетать» и «приземляться». При этом используя векторы в положении, чтобы сделать движение более плавным.

Как мы читали ранее, нулевые объекты должны быть превращены в видимые и иметь 0% прозрачности, чтобы работать.

После того, как у меня появилась анимация, я захотел открыть расширение Lottie.

Откроется окно, где вы можете просмотреть анимацию, загрузить её в Lottie-файлы и сохранить на своем компьютере. Для этого вам уже нужно иметь аккаунт в LottieFiles.

Этот способ создания анимации для веб-сайтов действительно интересен, поскольку он сохраняет отличное качество и прост в реализации.

Читайте также: