Lottie-анимация: инструмент, который пригодится в работе каждому дизайнеру

3 938

Видели, какие крутые стикеры сейчас можно найти в Телеграме? Так вот, это не стандартные 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 шага.

  1. Скачайте специальный плагин для Lottie. 
  • Скачайте установщик ZXPInstaller.
  • Скачайте ZXP-файл Bodymovin.
  • Извлеките архив.
  • Запустите ZXPInstaller, перенесите в окошко архив с плагином — он установится автоматически.
  1. Запустите After Effects. 
  • Сделайте разрешение: Preferences → Scripting and expressions → поставьте галочку Allow Scripts to Write Files and Access Network.
  • Выберите расширение Bodymovin: Windows → Extension → Bodymovin.
  • В открывшемся окне выберите нужную композицию и укажите путь для рендера.
  • Кликните по зелёной кнопке, а плагин Bodymovin закодирует анимацию в .json файл.
  • Найдите .json файл в папке, в которую вы его сохранили.
  1. Анимация готова: осталось загрузить её на сайт или в приложение для 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 или использовать стандартные картинки.

3 939