Всем привет, меня зовут Артем Сафаров, я — дизайнер из веб-студии 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 существенно упрощает внедрение анимации в приложение или сайт и открывает массу возможностей для реализации идей дизайнера.
Пишите в комментариях, был ли у вас опыт работы с этой технологией, и что вы о ней думаете!
Вот за такими материалами я и хожу на vc. Поставьте статье плюс, поддержите Артёма. Занимательный факт — в полезных статьях обычно нет ни рекламы Телеграм-каналов, ни какой-либо другой.
Спасибо! Рад быть полезным
В рекламе нет ничего плохого, если статья и впрямь интересная или полезная.
К тому же получать полезные ништяки действительно удобно в телеге, так как до вц.ру еще надо добраться и потом не потеряться в ленте
Качественный контент не равно отсутствие рекламы. Тут, например, вполне себе есть нативная реклама студии и самого автора. Как ты думаешь, зачем люди пишут интересный контент, просто от нефиг делать? Желание нести пользу миру? 😁
Если мотивы не реклама, то подписчики (чтобы показывать рекламу в будущем, своих продуктов, проектов, себя). При этом в релевантной и адекватной рекламе нет ничего плохого. Она часто полезна.
Надеюсь, на рынке появится достойный конкурент афтеру для ui-анимации и заткнет их за пояс человеческим интерфейсом, интуитивным в использовании. А то молодые дизайнеры смотрят на эти самолётные панели с кучей настроек и ненужных манипуляций, пугаются и потом не используют в работе. Фреймер как-то тоже не интуитивен, хочется аналог фигмы, который изучается за час, безо всяких НО. Может, кстати говоря, фигма придет к экспортируемой анимации… было бы здорово
Есть аж два - cavalry и rive.app. Но лотти крут тем, что его очень легко везде интегрировать.
Он уже был - Flash назывался :) Но его почему-то похерили вместо того чтобы адаптировать
Комментарий недоступен
Конечно же АЕ шляпа полная, как и плаг для Lottie к нему. Особенно учитывая, что за столько лет они не выпустили нормального обновления. Интерфейс - бэээхххх.
Для Lottie есть только одна нормальная альтернатива Keyshape (Mac only). Что интересно, ребята сделали нормальный экспорт в Lottie и ушли в закат. Но создавать в нем анимации на порядок приятнее, чем в том же RIve или Cavalry
В iOS и в частности в Safari, есть куда более удобный и менее ресурсоёмкий способ, это HEVC с альфа каналом. Как пример, системная анимация Siri использует именно данный подход.
Да, если не надо модифицировать в рантайме, видео с альфой — лучший вариант
Видео с альфаканалом штука интересная, но тут вопрос поддерживаемости... HEVC сейчас вроде только в Safari, не в курсе - может есть подобные конкурентные решения. Но тогда это опять костыли с пачкой вариантов реализации для разных платформ и браузеров
Очень ёмко, спасибо
спасибо :)
В альтернативах (сознательно? :) опущена возможность векторной анимации.
Сами держим в уме Лотти, но в итоге пока все сделано на чистом css в вебе - animated vector drawable/view animation для дроида/айос, так как анимации не настолько сложные (благо они довольно просто конвертятся друг в друга)
Заново изобрели Flash? :)
Я до этого думал, что это всё в анимированный SVG экспортится, везде работает "из коробки", все живут счастливо и держатся за руки, а тут оказывается отдельный формат для этого придумали и проприетарный монстр After Effects...
Этот формат поддерживает из коробки почти всё. Lottie можно делать не только в ae, благодаря отдельному формату можно в один клик изменять цвета на анимации, например.
Интересная статья!
благодарю :)
Спасибо, за подробно описанный материал!
спасибо, старались :)
After Effects нет для linux, расходимся.
Есть один нюанс - тестить лучше всегда на конкретной платформе и желательно прям в приложении, тк расхождения с веб плеером случаются. А так реально упрощает жизнь особенно в плане различных мелочей, жаль только дизайнеры на фрилансе не особо в лотти любят - хз почему.
ну вообще есть APNG, для мелкой анимации вполне неплох (пример http://littlesvr.ca/apng/samples.html
), с 15 года его поддерживают все браузеры "из коробки", так что упоминания он точно заслуживает ;) Также можно делать в After Effects, с прозрачностью, и даже растровыми эффектами.
Согласен, что lottie круче, вектор, все дела, но хотелось бы его стандартной поддержки в виде img или своего тега.
Эм, SVG?
Вот, пожалуй, один из лучших примеров lottie:
https://krivitzky.ru/
Комментарий недоступен
Спасибо! 1) Да, к сожалению, json игнорирует любые звуковые эффекты.
2) Чревато низкой производительностью и пропусками кадров
Лотти это мой самый страшный дизайнерский кошмар. Сколько суток было потрачено, чтобы сделать анимацию, переделать её под стандарты лотти, переделать её под ограничения лотти, переделать её из-за нерабочего экспорта лотти, переделать её из-за того, что она экспортировалась, но в режиме демонстрации не запускается, и переделать её, так как на сайте анимация не работает. В итоге фронтендер говорит, что либа лотти много весит и лучше он сам такую же анимацию сделает на ксс 🤷♂️Стоит ли писать про поддержку только базовых функций AE и необходимость рисовать шейпы вручную, экспорт из люстры не поддерживается. Мб эти проблемы уже пофикшены, не был в лотти полгода, но желания возвращаться тоже нет
когда мне будет тяжело, я буду перечитывать это и знать, что у меня все еще не так плохо)
Да, некоторые из этих моментов мы тоже встречали. Например, цвет элемента наследует цвет из интерфейса AE (когда слой подкрашивается для удобства работы) при экспорте.
Комментарий недоступен
Вообще можно сделать анимацию в Лотти и на растровых картинках, растр запишется в json, иногда это помогает
Експрешны можно просто конвертнуть в кифреймы, обычно не такая драматическая разница в весе выходит.
это которая жильём занимается или другая?
дочка ПИКа ага
Попробуйте плагин от лоттифайлс. Он гораздо удобнее и тоже бесплатный.
https://lottiefiles.com/plugins/after-effects
Комментарий удален модератором
Спасибо за отличную статью!
Т.е. чтобы сделать простенькую анимированную иконку надо знать AfterEffects. Это извращение. Ждем, когда Tumult Hype или Flow сделают экспорт в Lottie-совместимый JSON.
Комментарий недоступен
А shapeshifter.design не проще для простых зацикленных анимаций?
вот бы всем такие продукты где осталось добавить анимации
В своей веб-студии тоже малыми шагами переходим на lottie - хорошая штука
"К тому же разработчик ограничен в реализации анимации из-за трудностей с контролированием скорости движения анимированного элемента, они выглядят неестественно, так как перемещаются в пространстве с линейной скоростью." - это всё зависит от таланта программиста. Допустим, с помощью JavaScript можно делать это https://vk.com/video247145687_456239023 попробуйте повторить в Lottie.
А есть возможность использовать Lottie в имейл-верстке? GIF элементы сильно тяжелые и некоторые почтовые клиенты их просто не подгружают.
В чём преимущество лотти перед, ну например, SVGator?