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-версии.

Для наглядности сравним разные форматы анимаций, которые можно встретить на просторах интернета.

Какие есть форматы анимаций

Как настроить анимацию с помощью Lottie-библиотеки

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

1. Скачайте специальный плагин для Lottie. 

• Скачайте установщик ZXPInstaller.
• Скачайте ZXP-файл Bodymovin.
• Извлеките архив.
• Запустите ZXPInstaller, перенесите в окошко архив с плагином — он установится автоматически.

2. Запустите After Effects. 

• Сделайте разрешение: Preferences → Scripting and expressions → поставьте галочку Allow Scripts to Write Files and Access Network.

• Выберите расширение Bodymovin: Windows → Extension → Bodymovin.
• В открывшемся окне выберите нужную композицию и укажите путь для рендера.
• Кликните по зелёной кнопке, а плагин Bodymovin закодирует анимацию в .json файл.
• Найдите .json файл в папке, в которую вы его сохранили.

3. Анимация готова: осталось загрузить её на сайт или в приложение для 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 можно создавать:

Такие анимации позволяют прокачивать пользовательский опыт. Ведь намного приятнее смотреть на милого анимированного котика, который мурчит и топчется лапками на экране, чем на стандартную картинку на сайте. А учитывая, как сейчас растет интерес к геймификации и интерактивам, анимированные детали — функция, которая как никогда кстати.

Lottie в Telegram

Еще одно место, где встречаются такие анимации. Их можно обсуждать вечно. Это огромный поток ярких и интересных персонажей, которых внедрили в приложение мессенджера. Они находятся в стикерпаках. 

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

В чем преимущества лотти

Lottie-анимация — это формат файла с открытым кодом. Миниатюрный, высококачественный, интерактивный и масштабируемый.

Такие анимации становятся легче GIF-анимаций в 6 раз, а скорость загрузки возрастает в 10 раз. Формат поддерживается всеми устройствами и обычно легко интегрируется с другими инструментами.

Лотти — это отличное решение для имейл-рассылок, где вес письма строго ограничен. Так что лучше создавать для писем прикольные Lottie, чем обычные GIF или использовать стандартные картинки.