Lottie-анимация: инструмент, который пригодится в работе каждому дизайнеру
Видели, какие крутые стикеры сейчас можно найти в Телеграме? Так вот, это не стандартные GIF, а инструмент Lottie. В статье расскажем, что это, как настроить, где встречается и какие у него есть преимущества.
Что такое Lottie и как её сделать
JSON Lottie animation — лёгкая масштабируемая анимация для web-сайтов и мобильных приложений. Работает на базе библиотеки Lottie. Эта библиотека создана для веб-разработки: поддерживает Android, iOS и React Native.
С помощью библиотеки вы можете отображать анимацию After Effects в реальном времени. Это возможность создать «живые» изображения небольшого размера, которые легко открываются на любом сайте и устройстве без торможения.
Создателями библиотеки Lottie являются инженеры Airbnb.
Как Lottie animations изменили контент
Прежде чем погрузиться в тему Lottie, вернёмся в прошлое: 10 лет назад делать анимации и внедрять их в работу сайта было не просто. Вариантов было мало: первый способ — добавлять объёмные файлы на каждый экран, второй — писать сотни строк длинного кода, а после искать в нём ошибки. И всё равно по большей части страница у пользователя прогружалась слишком долго. Именно поэтому владельцы крупных сервисов и приложений часто отказывались от создания и использования анимаций. Они не хотели рисковать, тем более, если проще прикрепить обычное изображение.
Компании отказывались от анимированных фич до тех пор, пока не появилась библиотека Лотти. Принцип её работы прост: экспортированные анимации в виде файлов JSON кодируются из After Effects плагином Bodymovin. Расширение подключают на web-сайт на языке программирования JavaScript, который отображает анимацию в web-версии.
Для наглядности сравним разные форматы анимаций, которые можно встретить на просторах интернета.
Какие есть форматы анимаций
GIF
Имеет недочёты: занимает много памяти и в разы ухудшает качество.
AVI, mp4
Аналогично первому формату: много весит, нет возможности экспортировать видео с прозрачным фоном.
Разработка вручную с html-элементами
Сложный и трудоёмкий процесс, который подразумевает работу сразу двух специалистов: дизайнера и разработчика.
Lottie
Не имеет всех вышеперечисленных ограничений.
Как настроить анимацию с помощью Lottie-библиотеки
Переходим к созданию и настройке классных анимаций. Чтобы было легче, описали весь процесс в инструкции ниже. От крутого результата вас отделяют всего 3 шага.
- Скачайте специальный плагин для Lottie.
- Скачайте установщик ZXPInstaller.
- Скачайте ZXP-файл Bodymovin.
- Извлеките архив.
- Запустите ZXPInstaller, перенесите в окошко архив с плагином — он установится автоматически.
- Запустите After Effects.
- Сделайте разрешение: Preferences → Scripting and expressions → поставьте галочку Allow Scripts to Write Files and Access Network.
- Выберите расширение Bodymovin: Windows → Extension → Bodymovin.
- В открывшемся окне выберите нужную композицию и укажите путь для рендера.
- Кликните по зелёной кнопке, а плагин Bodymovin закодирует анимацию в .json файл.
- Найдите .json файл в папке, в которую вы его сохранили.
- Анимация готова: осталось загрузить её на сайт или в приложение для Android, iOS или React Native. При необходимости — настроить таймер времени, когда она будет появляться на экране.
Вы можете сделать анимацию с нуля в Adobe After Effect без переходов в другие программы или для начала отрисовать векторный файл в Adobe Illustrator.
Если вы работаете в Figma, анимации можно делать с помощью плагина LottieFiles. Он даёт возможность экспортировать прототипы в Figma как файлы в формате Lottie, а также SVG и GIF. Подключите плагин и посмотрите в библиотеке подходящие бесплатные варианты (спасибо авторам — их более 80 тысяч!). Или приступите к работе над своими анимациями во вкладке «Figma to Lottie». Результат можно вставить на холст в формате GIF, выбрав подходящий из слоёв в проекте.
Также вы можете кастомизировать готовые файлы из разделов библиотеки: просто удалите лишнее или поэкспериментируйте с деталями анимации.
Где встречаются лотти-анимации
Современный пользователь сталкивается с web анимацией в формате JSON каждый день — к примеру, все знают живых персонажей в приложениях Сбера.
Библиотекой для создания Lottie пользуются всем знакомые компании, такие как Google, Microsoft, TikTok и Netflix.
А теперь — к примерам.
С помощью Lottie можно создавать:
персонажей
нарративы
элементы пользовательского интерфейса (UI-решения)
уведомления от веб-сайтов и сервисов
подвижные логотипы
смайлики, стикеры
Такие анимации позволяют прокачивать пользовательский опыт. Ведь намного приятнее смотреть на милого анимированного котика, который мурчит и топчется лапками на экране, чем на стандартную картинку на сайте. А учитывая, как сейчас растет интерес к геймификации и интерактивам, анимированные детали — функция, которая как никогда кстати.
Lottie в Telegram
Еще одно место, где встречаются такие анимации. Их можно обсуждать вечно. Это огромный поток ярких и интересных персонажей, которых внедрили в приложение мессенджера. Они находятся в стикерпаках.
Получается анимация высокого качества, весом в несколько килобайт. Кстати, вы тоже можете создать свои стикеры, чтобы добавить вашим чатам, аккаунтам и комментариям индивидуальности, — для этого вполне хватит сильного желания и нашей инструкции.
В чем преимущества лотти
Lottie-анимация — это формат файла с открытым кодом. Миниатюрный, высококачественный, интерактивный и масштабируемый.
Такие анимации становятся легче GIF-анимаций в 6 раз, а скорость загрузки возрастает в 10 раз. Формат поддерживается всеми устройствами и обычно легко интегрируется с другими инструментами.
Лотти — это отличное решение для имейл-рассылок, где вес письма строго ограничен. Так что лучше создавать для писем прикольные Lottie, чем обычные GIF или использовать стандартные картинки.