Чем нам так нравятся 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 для статичного логотипа темной и светлой темы, раньше им приходилось создавать 2 отдельных логотипа — белый и черный. Благодаря Lottie приложение автоматически меняет цвет логотипа в зависимости от выбранной темы на противоположный.

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

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

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

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

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

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

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

• Скачайте Zip-файл по ссылке на Github.
• Извлеките архив и установите. zxp файл.

• Скачайте и установите ZXP Instraller c aescripts.com и запустите файл.

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

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

Window > Extension > Bodymovin

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

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

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

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

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

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

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

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

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

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

• Использование 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 существенно упрощает внедрение анимации в приложение или сайт и открывает массу возможностей для реализации идей дизайнера.

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

#lottie #webdesign #design #animation #веб_дизайн