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 в этом случае могут упростить плагины:
Создание 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 Preview — iOS и Android
Практика использования библиотеки lottie в мобильном приложении банка
В свое время Product Owner попросил подумать нас о создании эффективного процесса по внедрению анимации в наше приложение на android/ios. В то время мы делали задачу по предзаполнению заявки личными данными на кредитный продукт, и на ответ от сервера требовалось некоторое время, во время которого мы хотели показывать красивую анимацию загрузки.
Задача была понятна: дизайнер хотел нарисовать красиво, отдать исходники сразу на обе
платформы без допиливаний с его стороны, и чтобы это все не лагало на старых устройствах (да, мы ещё поддерживаем android 4.1).
Какие у меня были варианты для внедрения анимации:
После некоторых проведенных тестов с различными девайсами мы решили, что библиотеку надо внедрять, тем более, что ее возможности впечатляли. Особенно обрадовался дизайнер, теперь он мог делать практически любую анимацию в Adobe After Effects, и экспортировать в json файл несколькими кликами. Обрадовались и мы, но обо всем по порядку.
Lottie была придумана и реализована компанией Airbnb в ответ на растущий запрос в кроссплатформенной анимации, поэтому она одинаково (ну почти) работает на всех платформах. Сами разработчики утверждают, что их цель — реализовать максимальное количество функций After Effects, и в этом они преуспели. Сейчас внедрить Lottie анимацию так же просто, как и вставить картинку в ImageView.
Загрузка ресурсов
Поддерживается загрузка ресурсов из:
Кэширование анимации
Классно то, что все анимации, загруженные через res/raw или assets, сохраняются LRU кэшем, что позволяет не тратить попусту пользовательское время повторно на загрузку и парсинг анимации, так как в случае сложной анимации может потребоваться какое-то время. Что ещё круче, если вам нужно предварительно загрузить анимацию, а потом в следующем фрагменте отобразить анимацию мгновенно, вы можете воспользоваться кодом
Анимация закэшируется по ключу rawFile, и там, где вам нужно её будет реально использовать, она запустится почти мгновенно.
Управление прогрессом
Lottie позволяет устанавливать текущее состояние анимации через setProgress(. ). Это может пригодиться, если вы хотите анимировать состояние загрузки файла, позиции скролла, различных жестах и т.д. Я видел различные реализации на BottomSheets, PullToRefresh, CollapsingToolbarLayout.
Вот как можно использовать прогресс с AppBarLayout:
Зацикливание
Lottie поддерживает циклическое воспроизведение setRepeatMode() или setRepeatCount() не только целой анимации, но и любого фрагмента в пределах (0.0. 1.0). Это реализуется свойствами setMinFrame, setMaxFrame, setMinAndMaxFrame. Мы использовали это, чтобы не реализовывать 3 анимации для разных состояний загрузки файла: idle, progress, complete. Вот небольшой кусочек кода, который это решает:
Картинки
Одним из главных достоинств Lottie для нас стало то, что библиотека поддерживает вставку картинок прямо в анимацию. Причем, вы можете вставить как статичную картинку, так и динамическую, скачанную из интернета. Сейчас объясню как это работает.
В случае со статической картинкой все просто: дизайнер выгружает вам архив, где содержится json плюс сама картинка.
Вот этот img_0.png, это и есть картинка, которую вы должны положить в src/assets, и которая будет внутри анимации.
При динамической загрузке используется метод setImageAssetDelegate, в который вы должны передать bitmap. Мы предварительно загружаем картинку Glide-ом, поэтому на этапе открытия фрагмента с анимацией и картинкой все достается из кэша, поэтому всё довольно быстро. Вот код:
Производительность
Конечно, лучше не использовать много анимации на экранах, где пользователь проводит много времени, так как она требовательна к процессору. По нашим тестам, загрузка процессора на некоторых анимациях доходит до 20%. Поэтому идеальный кейс такой анимации — это интерактивные элементы, которые срабатывают один раз.
Если анимация на некоторых устройствах подтормаживает, иногда помогает
Однако разработчики рекомендуют использовать этот метод с осторожностью, так как разные телефоны по разному используют аппаратное ускорение, поэтому вместо ускорения вы можете получить обратный эффект.
Заключение
В целом, использование библиотеки Lottie существенно упрощает внедрение анимации в приложение.
Основные плюсы lottie, которые мы выделили:
Анимации в After Effects и Lottie без потери качества
Lottie — отличный способ экспортировать анимации из After Effects в JSON, сохраняя хорошее качество. В этой статье мы разберёмся, как приступить к работе с этим инструментом и на чём стоит заострить особое внимание.
В 2017 году инженеры Airbnb увидели потенциал анимации на основе JSON и вместе с лидером анимации создали библиотеки iOS и Android, которые смогли бы отображать файлы JSON, которые назвали «Lottie». Вы можете прочитать больше об истории здесь. Разработчики в Airbnb оставили исходный код открытым и создали сообщество GitHub для общения с дизайнерами и инженерами.
LottieFiles — это независимая платформа от Airbnb, на которой дизайнеры могут загружать, тестировать, покупать и выгружать анимации.
Airbnb также являются создателями плагина LottieFiles для After Effects, который работает аналогично Bodymoving и позволяет нам просматривать анимацию, загружать её на платформу LottieFiles, сохранять на компьютере.
Для начала необходимо установить плагин, вы можете использовать Bodymovin или LottieFile.
Я создал для своего логотипа простую анимацию, которая будет отображаться в верхнем меню веб-сайта. Это дрон с вращающимися лопастями, поэтому я импортировал в слои файлы Illustrator, сделал спиральные 3D-слои и повернул их.
Будьте внимательны, не все эффекты поддерживаются этими форматами файлов. На сегодняшний день 3D-слои не поддерживаются. Поэтому, прежде чем делать анимацию, стоит проверить поддержку.
Создание анимации для интернета — это не то же самое, что и создание традиционного видео. Мы должны принять во внимание несколько параметров настройки и форматирования, о которых нам никогда раньше не приходилось думать.
Вот список предложений, которыми делятся создатели Lottie:
Импортируйте слои, откройте композицию, выберите все слои, щелкните правой кнопкой мыши и выберите: «Создать» → «Создать фигуру из векторных слоёв».
Это создаст векторные слои, которые не доставят нам хлопот при экспорте в Lottie.
Нам нужно удалить AI-файлы и работать только с векторными слоями.
Я хотел анимировать лопасти в 3D, но поскольку они не поддерживаются, мне пришлось делать это «традиционным способом» и поэтому я симулировал вращение, анимируя размер в X (ширина).
После того, как воссоздать нужную скорость, я создал нулевой объект, чтобы переместить весь логотип и заставить его «взлетать» и «приземляться». При этом используя векторы в положении, чтобы сделать движение более плавным.
Как мы читали ранее, нулевые объекты должны быть превращены в видимые и иметь 0% прозрачности, чтобы работать.
После того, как у меня появилась анимация, я захотел открыть расширение Lottie.
Откроется окно, где вы можете просмотреть анимацию, загрузить её в Lottie-файлы и сохранить на своем компьютере. Для этого вам уже нужно иметь аккаунт в LottieFiles.
Этот способ создания анимации для веб-сайтов действительно интересен, поскольку он сохраняет отличное качество и прост в реализации.
Ещё больше информации ищите в нашем блоге 😉
Работа с анимацией Lottie
Узнайте, как импортировать и использовать Lottie для создания анимации в Adobe XD.
Lottie — это облегченный формат анимации, который можно экспортировать из Adobe After Effects как файлы JSON. Файлы Lottie меньше по размеру по сравнению с такими форматами, как анимированные GIF и PNG. Разработчики могут повторно использовать файлы Lottie в своем коде.
XD позволяет импортировать файлы Lottie и контролировать параметры воспроизведения Lottie. После настройки воспроизведения Lottie и подключения вашего прототипа вы можете просмотреть его, перед тем как опубликовать.
Рекомендуемое чтение
Импорт файлов Lottie
После импорта первый кадр Lottie отображается на холсте. Если первый кадр Lottie пустой, на холсте отображается пустой кадр. В таких случаях используйте панель «Слои», чтобы найти Lottie.
Если выбрать Lottie в режиме «Проект», вы увидите значок воспроизведения в левом верхнем углу.
Настройте параметры воспроизведения
После импорта вашего файла Lottie в XD выберите, когда он должен воспроизводиться. Выполните действия, описанные ниже, чтобы задать режим воспроизведения.
Параметры воспроизведения и соответствующие взаимодействия
Когда вы настраиваете параметры воспроизведения для Lottie в режиме «Проект», соответствующие взаимодействия автоматически устанавливаются в режиме «Прототип».
Воспроизводить автоматически
При выборе функции Воспроизводить автоматически триггер Время автоматически настроен на задержку 0 секунд.
Анимации After Effects & Lottie без потери качества
Ещё больше информации ищите в нашем блоге 😉
Lottie
В 2017 году инженеры Airbnb увидели потенциал анимации на основе JSON и вместе с лидером анимации создали библиотеки IOS и Android, которые смогли бы отображать файлы JSON, которые назвали «Lottie». Вы можете прочитать больше об истории здесь. Разработчики в Airbnb оставили исходный код открытым и создали сообщество GitHub для общения с дизайнерами и инженерами.
LottieFiles
LottieFiles — это независимая платформа от Airbnb, на которой дизайнеры могут загружать, тестировать, покупать и выгружать анимации.
Airbnb также являются создателями плагина LottieFiles для After Effects, который работает аналогично Bodymoving и позволяет нам просматривать анимацию, загружать её на платформу LottieFiles, сохранять на компьютере и т. д.
Приступим к работе
Для начала необходимо установить плагин, вы можете использовать Bodymovin или LottieFile.
Я создал для своего логотипа простую анимацию, которая будет отображаться в верхнем меню веб-сайта. Это дрон с вращающимися лопастями, поэтому я импортировал в слои файлы Illustrator, сделал спиральные 3D-слои и повернул их. 
Будьте внимательны, не все эффекты поддерживаются этими форматами файлов. На сегодняшний день 3D-слои не поддерживаются. Поэтому, прежде чем делать анимацию, стоит проверить поддержку. 
Следует заострить внимание
Создание анимации для Интернета — это не то же самое, что и создание традиционного видео. Мы должны принять во внимание несколько параметров настройки и форматирования, о которых нам никогда раньше не приходилось думать.
Зная все нюансы, приступим к работе
Импортируйте слои, откройте композицию, выберите все слои, щелкните правой кнопкой мыши и выберите: Создать / создать фигуру из векторных слоёв.
Это создаст векторные слои, которые не доставят нам хлопот при экспорте в Lottie. 
Нам нужно удалить AI-файлы и работать только с векторными слоями. 
Я хотел анимировать лопасти в 3D, но поскольку они не поддерживаются, мне пришлось делать это «традиционным способом» и поэтому я симулировал вращение, анимируя размер в X (ширина). 
После того, как воссоздать нужную скорость, я создал нулевой объект, чтобы переместить весь логотип и заставить его «взлетать» и «приземляться». При этом используя векторы в положении, чтобы сделать движение более плавным. 
Как мы читали ранее, нулевые объекты должны быть превращены в видимые и иметь 0% прозрачности, чтобы работать.
После того, как у меня появилась анимация, я захотел открыть расширение Lottie. 
Откроется окно, где вы можете просмотреть анимацию, загрузить её в Lottie-файлы и сохранить на своем компьютере. Для этого вам уже нужно иметь аккаунт в LottieFiles. 
Заключение
Этот способ создания анимации для веб-сайтов действительно интересен, поскольку он сохраняет отличное качество и прост в реализации.