Анимация lottie что это

Анимация Lottie

Скорее всего, вы видели крутую анимацию стикеров в Telegram. И скорее всего, задумывались, как это сделано. Может показаться, что это gif-анимация, но на самом деле здесь используется Lottie. Lottie-анимация — потрясающий инструмент, который делает анимацию в интернете более плавной, управляемой и избавляет пользователя от необходимости загружать тяжёлые файлы с анимацией. Созданный умными людьми из Airbnb, формат позволяет приложениям в реальном времени показывать анимацию, созданную в Adobe After Effects. Основные преимущества формата:

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

Файлы Lottie не ограничены растровым разрешением, а также не имеют фиксированной частоты кадров. Это позволяет воспроизводить файлы со скоростью 60 кадров в секунду.

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

Где можно применять Lottie

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

Крутой нарратив. Bodymovin позволяет экспортировать множество элементов из After Effects. Чрезвычайно приятный фрагмент цикла ниже был создан с использованием физики Ньютона в After Effects.

Простые элементы пользовательского интерфейса. Lottie — это отличное решение для UI. Совсем небольшие размеры файлов, кристально чистое разрешение и частота кадров означают, что созданные вами значки останутся такими, как вы их проиллюстрировали.

Смайлики и стикеры. Все анимированные стикеры в Telegram — Lottie-анимация. Её использование значительно экономит трафик, поскольку приложение работает с данными, а не с видеофайлами.

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

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

Инструменты создания анимации Lottie

Джойстики и слайдеры. Слайдеры Joysticks — это система превращения сложных систем оснастки, используемых при анимации тел, лиц и рук персонажей, в простой набор графических слайдеров и джойстиков. Чрезвычайно мощный инструмент, и его способность объединять множество независимых движущихся элементов в один экономит огромное количество времени и усилий. Персонаж создаётся с помощью системы джойстиков и экспортируется в файл Lottie с помощью Bodymovin.

Duik. Duik — это оригинальная система ригга с обратной кинематикой. Инструмент используется для соединения конечностей таким образом, чтобы аниматор мог расположить ступни и руки в нужном месте. Это основной инструмент для анимации в After Effects.

Rubber Hose. Rubber Hose, созданный BattleAxe, — еще один отличный способ оснастить ваших персонажей. Обтекаемый, простой пользовательский интерфейс позволяет быстро и легко санимировать конечности, тросы, веревки. На анимации показано использование инструмента в механизме качелей.

Источник

Анимация в мобильных приложениях: тестируем 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

Новый open-source инструмент для простого добавления анимации.

Jul 7, 2017 · 4 min read

Раньше, добавление сложной анимации для Android, iOS, React Native приложений было сложным и длительным процессом. Вы или добавляли много картинок для каждого кадра или писали тысячи строк трудно поддерживаемого кода, который приносил вам боль. Из-за этого много приложений не используют анимацию, несмотря на то что анимация существенно улучшает юзабилити приложения. Один год назад мы изменить это.

Лёгкое создание “крутой” анимации

Мы уже начали прменять Lottie для анимации на нескольких экранах, включащих: уведомления, полноэкранные анимации. И мы планируем использование анимаций для движения вперёд.

Гибкое и эффективное решение

Airbnb — глобальная компания, которая поддерживает миллионы гостей и хозяев, и использование анимации в приложении Airbnb очень важно для нас. Есть несколько библиотек, похожих на Lottie, например Marcus Eckert’s Squall и Facebook’s Keyframes, но наша цель немного другая. Facebook взял небольшой набор функций After Effects, и они сфокусировались главным образом на взаимодействии с UI, но мы хотим подержить максимальное кол-во функций. Также для Squall, дизайнеры Airbnb используют библиотеку в комбинации с Lottie, потому что Squall имеет прекрасный After Effects превью приложения, который становится частью нашего workflow. Тем не менее он поддерживается только iOS, а наши программисты нуждаются в кросс платформенном решении.

Lottie также имеет несколько функций, встроенных в API, которые делаю использование более гибким и эффективным. Бтиблиотека поддерживает загрузку JSON файлов через сеть, что удобно для A/B тестировния. Также имеется и механизм кэширования, при частном использовании анимации. Lottie анимации могут управляться с помощью жестов, скорость анимации также легко изменяется. iOS поддерживает добавление нативного UI во время выполнения анимации в runtime, что может быть полезно для сложных анимаций.

У нам много идей на будущее, над которыми мы работаем. В будущем будет маппинг с Lottie анимацией, контроль view transitions с помощью Lottie, поддержка Battle Axe’s RubberHose, градиентов, типов, поддержка изображений. Самая сложная часть — определить функцию над которой нужно работать для следующей версии Lottie.

Создание сообщества

Создание чего-то open source — это больше чем выложить это в открытый доступ. Это мост, который соединяет людей и создает сообщество. Мы близки к релизу Lottie для дизайнеров и программистов в GitHub

Источник