В дополнение к моей статье как создавать анимации в интерфейсах через Lottie, я решила сделать дополнительный обзор крутых вещей, делающие работу приятнее.
Что такое Lottie
Первым делом давайте разберемся что такое Lottie. Это библиотека, которая позволяет конвертировать анимацию из After Effects в код JSON для передачи разработчикам web, android и iOS
У них на сайте есть раздел с примерами работ, где можно посмотреть какие крутые анимации получаются.
Можете скачать бесплатные работы, которые выкладывают пользователи и использовать в своих проектах. А также есть работы, которые можно купить.
Предпросмотр
После загрузки анимации на сайт Lottie, открывается страница с предпросмотром. Подробнее про выгрузку в Lottie и подготовку файла читайте здесь.
Итак, по ссылке открывается страница предпросмотра, где есть несколько прикольных фич, например, управление скоростью. Если уже после загрузки анимации захотелось ее ускорить или замедлить, сделать это очень просто.
Можно менять фон и анимации, чтобы протестировать для разных состояний, или темой темы. Либо показать на прозрачной подложке. Для этого сверху выберите раздел Handoff.
Тут еще есть сводная инфа и показ границ анимации. Отсюда же можно отправить ссылку разработчикам.
Редактор
В этой же панели Handoff есть встроенный редактор. Выбираем "Edit animation" и попадаем в интерфейс редактирования. Тут можно посмотреть слои, изменять размер и всякие разные параметры.
Но самое крутое, я считаю, это быстрое изменение цвета. Меняются сразу во всей анимации, намного проще чем в After Effects все менять, если много слоев или цветов.
Есть также кнопка конвертации анимации в формат telegram стикеров, но на ней подробно останавливаться не буду.
Мобильное приложение
У Лотти есть приложение для телефонов (iOS и Android). Помимо очевидного функционала, дублирующего сайт, там есть крутая возможность сделать предпросмотр анимации на девайсе. Для этого не обязательно даже авторизовываться.
Для этого находим на сайте QR-код анимации, которую хотим посмотреть на девайсе. Открываем в приложении раздел "сканировать" и наводим камеру.
Вуаля! На девайсе проигрывается анимация, уже переведенная в код, так, как она будет выглядеть уже после встраивания. Это удобно для тестирования на устройствах, еще перед тем как отдавать код разработчику.
Конвертация в gif
После того как вы создали анимацию, можете быстро переконвертировать ее в gif. Для этого открываем нашу ссылку и переходим на вкладку Handoff. Сверху страницы нажимаем "Convert to GIF".
Может пригодиться, например, если разработчики отказались подключать Lottie библиотеку. В таком случае можно передать gif, если уж очень хочется. Либо, может пригодиться для встраивания в фигму. Хотя тут есть более крутой способ — специальный плагин.
Плагин для фигмы
У Lottie есть плагин для Figma. Вы авторизовывайтесь в своей учетке и получаете список анимаций, которые загрузили. Тут же можете переконвертировать анимацию в код и поместить на свой frame.
Легко и просто можно добавлять эти анимации на свое макетики и показывать красивые анимации на прототипах. Пока способа показывать в фигме код без конвертации в gif, к сожалению, нет.
В заключение
Я советую всем использовать анимацию Lottie в своих проектах, так как это просто, быстро, дешево и офигенно.
Кстати, эту анимацию вы можете скачать бесплатно по ссылке https://lottiefiles.com/77005-lines-loader
Пишите комментарии и задавайте вопросы. С удовольствием отвечу ❤️