Чем нам так нравятся Lottie-анимации, и почему вам тоже стоит о них узнать

Всем привет, меня зовут Артем Сафаров, я — дизайнер из веб-студии Pyrobyte. Мы используем Lottie-анимации на проектах студии, эта технология нам очень нравится, поэтому сегодня и вас с ней познакомим :)

Lottie — это библиотека для веб-разработки, iOS, Android и React Native, которая отображает анимацию After Effects в режиме реального времени, позволяя сайтам и приложениям использовать анимацию так же легко, как и статическое изображение. Создателями этой библиотеки являются инженеры из компании Airbnb.

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

Эта библиотека использует анимации, экспортированные в виде файлов JSON из After Effects путем кодирования в данный формат плагином Bodymovin. Расширение подключается на сайт с проигрывателем JavaScript, который позволяет отображать анимацию в вебе.

Как обычно реализовываются анимации в приложениях и сайтах

  • GIF. Распространенный формат, но имеет довольно много ограничений, связанных с потерей качества и большим весом.
  • AVI, mp4. Большой вес финальных файлов, нет возможности экспортировать видео с прозрачным фоном.
  • Анимированные вручную разработчиком html-элементы. Трудоемкий процесс в разработке, который влечет за собой большое количество правок от дизайнера. К тому же разработчик ограничен в реализации анимации из-за трудностей с контролированием скорости движения анимированного элемента, они выглядят неестественно, так как перемещаются в пространстве с линейной скоростью.

Из-за таких ограничений приходится жертвовать либо качеством анимации, либо временем для её оптимизации. В подобной ситуации на помощь и приходит Lottie.

Примеры использования

Благодаря возможностям, которые предоставляет Lottie-анимация, неудивительно, что данную технологию используют такие известные компании как: Google, Elevate, eero, The New York Times, Instacart, Uber, Walgreens, iHeartRadio, Сбербанк, Telegram.

Область применения Lottie-анимации на сайтах и приложениях имеет большой охват — от анимированных иллюстраций, как у Google и Elevate

до анимированных UI-эффектов и статичных логотипов как у The New York Times.

Чем нам так нравятся Lottie-анимации, и почему вам тоже стоит о них узнать

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

Анимированная навигация

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

Гамбургер

Анимированная кнопка «гамбургер» усиливает ощущение прямой манипуляции и делает переход к новому состоянию более очевидным для пользователей.

Текущее состояние системы

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

Like / Dislike

Хорошо продуманные анимированные UI-эффекты для кнопки «лайк». Подобные анимации служат для того, чтобы взаимодействие с продуктом стало более увлекательным и приятным.

Telegram

Telegram используют данную технологию для анимированных стикерпаков, так как Lottie позволяет получить высококачественную анимацию без потери качества весом в несколько килобайт. А еще мы создали свой стикерпак, который ждет, чтобы вы его добавили к себе в коллекцию :)

Как использовать Lottie

Чтобы вам не запутаться при установке плагина Bodymovin, мы разбили процесс на несколько шагов:

Шаг 1

Прежде всего потребуется скачать плагин для Lottie, для этого есть несколько способов, которые перечислены на странице BodyMovin на Github. Вот самый простой из них:

  • Скачайте Zip-файл по ссылке на Github.
  • Извлеките архив и установите. zxp файл.
Чем нам так нравятся Lottie-анимации, и почему вам тоже стоит о них узнать
  • Скачайте и установите ZXP Instraller c aescripts.com и запустите файл.

Шаг 2

Теперь, когда все установлено, самое время запустить After Effects.

  • Откройте свой проект в After Effects и выберите расширение Bodymovin.

Window > Extension > Bodymovin

Чем нам так нравятся Lottie-анимации, и почему вам тоже стоит о них узнать
  • Откроется панель Bodymovin. Выберите нужную композицию и укажите путь для рендера, нажмите на зеленую кнопку, и плагин bodymovin закодирует вашу анимацию в. json файл.
Чем нам так нравятся Lottie-анимации, и почему вам тоже стоит о них узнать

3. Найдите экспортированный файл. json в указанной папке.

Шаг 3

Как только ваша анимация будет готова, вы можете сразу подключить её к своему приложению или на свой сайт. В зависимости от выбранной вами платформы подключите библиотеку Lottie для iOS, Android или React Native. Анимация в формате. json весит довольно мало, и это хорошо!

Библиотека Lottie позволяет настроить режим воспроизведения анимации и установить триггер действия анимации (клик, наведение и т.д.).

Ограничения Lottie-анимации:

1. Придется отказаться от растровых эффектов After Effects и использовать анимацию шейпов.

Большую часть растровых эффектов библиотека Lottie не поддерживает за исключением некоторых из них, их можно посмотреть здесь. Поэтому будет лучше, если вы на начальных этапах продумаете реализацию анимации.

2. Возможно, придется обойтись без экспрешнов

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

3. Придется свести к минимуму использование alpha matte и alpha inverted matte

Несмотря на то, что данный тип альфа-канала невероятно удобен в использовании, все же лучше воздержаться от использования этих функций, так как зачастую они дают непредсказуемый результат, и найти проблему становится довольно сложно. Советуем использовать маски, чтобы избежать непредвиденных артефактов на анимации.

4. Использовать как можно меньше кейфреймов

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

Чем нам так нравятся Lottie-анимации, и почему вам тоже стоит о них узнать

Как протестировать анимацию

Существует сервис Lottie Files, в него встроен web-плеер Lottie, и на нем можно протестировать вашу анимацию перед тем, как передавать ее в разработку.

Чем нам так нравятся Lottie-анимации, и почему вам тоже стоит о них узнать

в футере можно найти ссылки на приложение Lottie для iOS и Android. Приложение позволяет дизайнеру тестировать анимацию с телефона и видеть все недочеты на этапе тестирования.

Преимущества использования Lottie

  • Использование Lottie-анимации значительно экономит время по сравнению с реализацией сложной анимации кодом.
  • Lottie также имеет дополнительный механизм кэширования, поэтому часто используемые анимации могут загружать кэшированную копию, что увеличит скорость загрузки страницы или экрана.
  • Одно из главных преимуществ Lottie это — маленький вес и адаптивность. Благодаря тому, что библиотека работает с векторной графикой, анимация будет выглядеть хорошо на разных разрешениях экрана.
  • Библиотека позволяет управлять процессом анимации. Это может пригодиться, если вы планируете использовать различные триггеры на своей анимации.
  • Кроссплатформенное решение для iOS, Android, Web.
  • Большое количество элементов из After Effects позволяют дизайнеру реализовать задуманную анимацию.

Перспективы развития технологии

Сегодня Lottie применяется повсеместно от статичных логотипов до анимированных иллюстраций. С технологией Lottie Web нет необходимости в анимации, сохраненной в формате .gif, потому как анимация сохраненная в .json формате не теряет первоначального качества и весит в разы меньше. Стоит отметить, что с 2015 года компания Airbnb регулярно совершенствует технологию, и если еще несколько лет назад Lottie не поддерживала эффекты из After Effects, то сегодня спокойно поддерживает многие из них.

Хелперы и советы

Для экономии времени при переносе проекта из Figma/Sketch советуем использовать плагин AEUX, Это плагин, который экспортирует все слои из Sketch или Figma в After Effects за несколько секунд. Установка займет не больше 10 минут, но в будущем это сэкономит вам уйму времени и нервов.

Плюсы AEUX:

  • Более высокая скорость сборки артбордов.
  • Поддержка редактирования символов для текста и вложенных символов.
  • Экспорт изображений был улучшен за счет рисования собственных АE градиентов и устранения лишних изображений.

Использование библиотеки Lottie существенно упрощает внедрение анимации в приложение или сайт и открывает массу возможностей для реализации идей дизайнера.

Пишите в комментариях, был ли у вас опыт работы с этой технологией, и что вы о ней думаете!

501501
75 комментариев

Вот за такими материалами я и хожу на vc. Поставьте статье плюс, поддержите Артёма. Занимательный факт — в полезных статьях обычно нет ни рекламы Телеграм-каналов, ни какой-либо другой.

77
Ответить

Спасибо! Рад быть полезным

24
Ответить

В рекламе нет ничего плохого, если статья и впрямь интересная или полезная.

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

6
Ответить

Качественный контент не равно отсутствие рекламы. Тут, например, вполне себе есть нативная реклама студии и самого автора. Как ты думаешь, зачем люди пишут интересный контент, просто от нефиг делать? Желание нести пользу миру? 😁

Если мотивы не реклама, то подписчики (чтобы показывать рекламу в будущем, своих продуктов, проектов, себя). При этом в релевантной и адекватной рекламе нет ничего плохого. Она часто полезна.

1
Ответить

Надеюсь, на рынке появится достойный конкурент афтеру для ui-анимации и заткнет их за пояс человеческим интерфейсом, интуитивным в использовании. А то молодые дизайнеры смотрят на эти самолётные панели с кучей настроек и ненужных манипуляций, пугаются и потом не используют в работе. Фреймер как-то тоже не интуитивен, хочется аналог фигмы, который изучается за час, безо всяких НО. Может, кстати говоря, фигма придет к экспортируемой анимации… было бы здорово

18
Ответить

Есть аж два - cavalry и rive.app. Но лотти крут тем, что его очень легко везде интегрировать.

8
Ответить

Он уже был - Flash назывался :) Но его почему-то похерили вместо того чтобы адаптировать

4
Ответить