{"id":13502,"url":"\/distributions\/13502\/click?bit=1&hash=a81ed6f897d123d854b91b907b479be2ea058a6a8ec03bd6f76bfc8a24665263","title":"\u0425\u043e\u0447\u0443 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0438 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c 3D-\u043c\u0443\u043b\u044c\u0442\u0444\u0438\u043b\u044c\u043c. \u0413\u0434\u0435 \u0443\u0447\u0438\u0442\u044c\u0441\u044f?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"7eb01878-f5ab-5bdb-ae26-b8e9a900dfa1","isPaidAndBannersEnabled":false}

Чем нам так нравятся 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, дизайнер может не только спроектировать и отрисовать навигацию для мобильного приложения, но и реализовать приятную визуальную обратную связь при переходе в другой раздел меню.

Гамбургер

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

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

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

Like / Dislike

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

Telegram

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

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

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

Шаг 1

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

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

Шаг 2

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

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

Window > Extension > Bodymovin

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

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

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

0
75 комментариев
Написать комментарий...
Louis Cyphre

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

Ответить
Развернуть ветку
Артем Сафаров
Автор

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

Ответить
Развернуть ветку
1 комментарий
Pixel Lens

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

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

Ответить
Развернуть ветку
2 комментария
Иван Мартьянов

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

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

Ответить
Развернуть ветку
1 комментарий
Ronan Hardman

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

Ответить
Развернуть ветку
Olexandr Tikan

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

Ответить
Развернуть ветку
9 комментариев
Сергій Зеленський

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

Ответить
Развернуть ветку
1 комментарий
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Биг Хамустер

Конечно же АЕ шляпа полная, как и плаг для Lottie к нему. Особенно учитывая, что за столько лет они не выпустили нормального обновления. Интерфейс - бэээхххх.

Для Lottie есть только одна нормальная альтернатива Keyshape (Mac only). Что интересно, ребята сделали нормальный экспорт в Lottie и ушли в закат. Но создавать в нем анимации на порядок приятнее, чем в том же RIve или Cavalry

Ответить
Развернуть ветку
jeudesprits

В iOS и в частности в Safari, есть куда более удобный и менее ресурсоёмкий способ, это HEVC с альфа каналом. Как пример, системная анимация Siri использует именно данный подход.

Ответить
Развернуть ветку
Philip Vasilchenko

Да, если не надо модифицировать в рантайме, видео с альфой — лучший вариант

Ответить
Развернуть ветку
Andy Ch

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

Ответить
Развернуть ветку
2 комментария
Artemy Kuznetsovsky

Очень ёмко, спасибо

Ответить
Развернуть ветку
Артем Сафаров
Автор

спасибо :)

Ответить
Развернуть ветку
aeli mill

В альтернативах (сознательно? :) опущена возможность векторной анимации.
Сами держим в уме Лотти, но в итоге пока все сделано на чистом css в вебе - animated vector drawable/view animation для дроида/айос, так как анимации не настолько сложные (благо они довольно просто конвертятся друг в друга)

Ответить
Развернуть ветку
Владимир

Я до этого думал, что это всё в анимированный SVG экспортится, везде работает "из коробки", все живут счастливо и держатся за руки, а тут оказывается отдельный формат для этого придумали и проприетарный монстр After Effects...

Ответить
Развернуть ветку
Olexandr Tikan

Этот формат поддерживает из коробки почти всё. Lottie можно делать не только в ae, благодаря отдельному формату можно в один клик изменять цвета на анимации, например.

Ответить
Развернуть ветку
Сергій Зеленський

Заново изобрели Flash? :)

Ответить
Развернуть ветку
Sivachevski

Интересная статья!

Ответить
Развернуть ветку
Артем Сафаров
Автор

благодарю :)

Ответить
Развернуть ветку
Азиз Бегишов

Спасибо, за подробно описанный материал!

Ответить
Развернуть ветку
Артем Сафаров
Автор

спасибо, старались :)

Ответить
Развернуть ветку
mw d

After Effects нет для linux, расходимся.

Ответить
Развернуть ветку
Павел

Есть один нюанс - тестить лучше всегда на конкретной платформе и желательно прям в приложении, тк расхождения с веб плеером случаются. А так реально упрощает жизнь особенно в плане различных мелочей, жаль только дизайнеры на фрилансе не особо в лотти любят - хз почему.

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

ну вообще есть APNG, для мелкой анимации вполне неплох (пример http://littlesvr.ca/apng/samples.html
), с 15 года его поддерживают все браузеры "из коробки", так что упоминания он точно заслуживает ;) Также можно делать в After Effects, с прозрачностью, и даже растровыми эффектами.

Согласен, что lottie круче, вектор, все дела, но хотелось бы его стандартной поддержки в виде img или своего тега.

Ответить
Развернуть ветку
Dmitry Mezenin
Согласен, что lottie круче, вектор, все дела, но хотелось бы его стандартной поддержки в виде img или своего тега

Эм, SVG?

Ответить
Развернуть ветку
10 комментариев
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Артем Сафаров
Автор

Спасибо! 1) Да, к сожалению, json игнорирует любые звуковые эффекты.
2) Чревато низкой производительностью и пропусками кадров

Ответить
Развернуть ветку
1 комментарий
Аркадий Чумаков

Заказываем не стесняемся
https://lottiefiles.com/user/3515

Ответить
Развернуть ветку
Artyom Konakov

Вообще можно сделать анимацию в Лотти и на растровых картинках, растр запишется в json, иногда это помогает

Ответить
Развернуть ветку
Olexandr Tikan

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

Ответить
Развернуть ветку
sardelkin
компания Airbnb регулярно совершенствует технологию

это которая жильём занимается или другая?

Ответить
Развернуть ветку
Nikolay Kapustin

дочка ПИКа ага

Ответить
Развернуть ветку
Nikita Loginov

Попробуйте плагин от лоттифайлс. Он гораздо удобнее и тоже бесплатный.

Ответить
Развернуть ветку
Nikita Loginov
Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
FooWarrior

Спасибо за отличную статью!

Ответить
Развернуть ветку
Kirill Morozov

Вот, пожалуй, один из лучших примеров lottie:

https://krivitzky.ru/

Ответить
Развернуть ветку
Alexey Kletsel

Т.е. чтобы сделать простенькую анимированную иконку надо знать AfterEffects. Это извращение. Ждем, когда Tumult Hype или Flow сделают экспорт в Lottie-совместимый JSON.

Ответить
Развернуть ветку
Аркадий Чумаков
Ответить
Развернуть ветку
Sergey S

А shapeshifter.design не проще для простых зацикленных анимаций?

Ответить
Развернуть ветку
добрая букашка

вот бы всем такие продукты где осталось добавить анимации

Ответить
Развернуть ветку
Руслан Июнь

В своей веб-студии тоже малыми шагами переходим на lottie - хорошая штука

Ответить
Развернуть ветку
Non Existence

"К тому же разработчик ограничен в реализации анимации из-за трудностей с контролированием скорости движения анимированного элемента, они выглядят неестественно, так как перемещаются в пространстве с линейной скоростью." - это всё зависит от таланта программиста. Допустим, с помощью JavaScript можно делать это https://vk.com/video247145687_456239023 попробуйте повторить в Lottie.

Ответить
Развернуть ветку
Amir Gimaev

Лотти это мой самый страшный дизайнерский кошмар. Сколько суток было потрачено, чтобы сделать анимацию, переделать её под стандарты лотти, переделать её под ограничения лотти, переделать её из-за нерабочего экспорта лотти, переделать её из-за того, что она экспортировалась, но в режиме демонстрации не запускается, и переделать её, так как на сайте анимация не работает. В итоге фронтендер говорит, что либа лотти много весит и лучше он сам такую же анимацию сделает на ксс 🤷‍♂️Стоит ли писать про поддержку только базовых функций AE и необходимость рисовать шейпы вручную, экспорт из люстры не поддерживается. Мб эти проблемы уже пофикшены, не был в лотти полгода, но желания возвращаться тоже нет

Ответить
Развернуть ветку
Андрей Лепков

когда мне будет тяжело, я буду перечитывать это и знать, что у меня все еще не так плохо)

Ответить
Развернуть ветку
Антон Лисицкий

Да, некоторые из этих моментов мы тоже встречали. Например, цвет элемента наследует цвет из интерфейса AE (когда слой подкрашивается для удобства работы) при экспорте.

Ответить
Развернуть ветку
Ярослав Бершанский

А есть возможность использовать Lottie в имейл-верстке? GIF элементы сильно тяжелые и некоторые почтовые клиенты их просто не подгружают.

Ответить
Развернуть ветку
Алексей Осипенко

В чём преимущество лотти перед, ну например, SVGator?

Ответить
Развернуть ветку
Читать все 75 комментариев
null