Анимация в мобильных приложениях: тестируем 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-React-Native
Вы создаете умопомрачительную анимацию с помощью After Effects и намереваетесь явить ее миру. Один из способов воплотить задуманное — использовать ее в качестве экрана-заставки или компонента загрузчика в приложении. Но на вашем пути возникает небольшая проблема: Adobe не разрешает это сделать.
И тут на помощь приходит библиотека lottie-react-native, позволяющая отрисовывать анимации в приложении React Native. А самое главное преимущество состоит в том, что для начала работы достаточно лишь минимального объема кода.
На основе материала статьи вы научитесь интегрировать библиотеку lottie-react-native в свой проект. Наша конечная цель выглядит так:
С задачами определились — за дело!
Начальные этапы
Инициализация проекта
В текущем проекте используется Expo. Инициализируем приложение React Native, выполняя в терминале следующую команду:
Установка зависимостей
Этот этап подготовки пройден, и теперь нам нужны файлы активов.
Файлы активов
Вы можете воспользоваться собственной анимацией, экспортировав ее с помощью плагина Bodymovin. Но в данном руководстве мы поработаем с директорией Lottie Files. Она содержит множество бесплатной анимации, которую можно импортировать в проект. Нам интересны две из них: Lava Preloader и Switch Toggle.
Для получения этих активов скачиваем необходимые файлы в формате JSON:
Lottie: основы
В этом разделе вы узнаете об основных принципах этой технологии.
Простые анимации
Теперь осталось только отобразить этот компонент на экране. Для этого в App.js пишем код:
Объект статичен, поскольку его воспроизведение еще не задано. Приведем его в движение посредством свойства autoPlay :
Вот так все просто!
Анимации загрузчика
В этом разделе воспользуемся Coffee API для отображения данных на экране. В процессе их загрузки React Native займется отрисовкой анимации.
Создаем файл LoadingAnimation.js и для начала пишем в нем следующий код:
Далее добавляем к этому же файлу следующий код:
Отлично! Код работает. Далее научимся управлять другими свойствами анимации.
Управление скоростью
Скорость анимации увеличивается втрое.
Уменьшим скорость, установив отрицательное значение:
Обработка завершения анимации
Взаимодействие с анимацией
В этом разделе вы узнаете об императивном API Lottie, обеспечивающим более детальное управление активом.
Воспроизведение и пауза
Проинструктируем Lottie запускать анимацию при нажатии пальцем на графические объекты и приостанавливать ее при его поднятии.
Разберем данный код.
Переключатели
В этом разделе применим анимацию переключателя для перехода между состояниями “on” и “off”.
Наша задача — переключаться между этими кадрами в зависимости от состояния.
Выполнив эту часть задания, добавляем следующий код:
Весь код можно найти на GitHub.
Заключение
Если вы ищите простую в использовании библиотеку анимации, то Lottie отлично подойдет для вашего приложения. И конечно, вы оцените тот факт, что вам не нужно перестраивать анимации посредством кода, вследствие чего можно сосредоточиться на более важных частях проекта.
Анимации 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. 
Заключение
Этот способ создания анимации для веб-сайтов действительно интересен, поскольку он сохраняет отличное качество и прост в реализации.
Анимации в 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
Скорее всего, вы видели крутую анимацию стикеров в 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 — это оригинальная система ригга с обратной кинематикой. Инструмент используется для соединения конечностей таким образом, чтобы аниматор мог расположить ступни и руки в нужном месте. Это основной инструмент для анимации в After Effects.
Rubber Hose, созданный BattleAxe, — еще один отличный способ оснастить ваших персонажей. Обтекаемый, простой пользовательский интерфейс позволяет быстро и легко санимировать конечности, тросы, веревки. На анимации показано использование инструмента в механизме качелей.
