Наши контакты
г. Москва, ул. Большая Новодмитровская,
д. 23, стр. 6
Email
school@effectno.com
+7 (499) 404-12-91

Анимация Lottie

Скорее всего, вы видели крутую анимацию стикеров в Telegram. И скорее всего, задумывались, как это сделано. Может показаться, что это gif-анимация, но на самом деле здесь используется Lottie. Lottie-анимация — потрясающий инструмент, который делает анимацию в интернете более плавной, управляемой и избавляет пользователя от необходимости загружать тяжёлые файлы с анимацией. Созданный умными людьми из Airbnb, формат позволяет приложениям в реальном времени показывать анимацию, созданную в Adobe After Effects. Основные преимущества формата:

  • Качество векторного изображения

Файлы Lottie состоят из кода, описывающего движущиеся векторы. Таким образом, создаваемые изображения не зависят от пикселей и проблем, связанных с их относительным разрешением. Вы можете развернуть анимацию на весь экран, и она останется такой же чёткой, как и её эскизы.

  • Плавное воспроизведение и высокий FPS

Файлы Lottie не ограничены растровым разрешением, а также не имеют фиксированной частоты кадров. Это позволяет воспроизводить файлы со скоростью 60 кадров в секунду.

  • Маленькие размеры файлов

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

Где можно применять Lottie

Персонажи

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

Крутой нарратив

Bodymovin позволяет экспортировать множество элементов из After Effects. Чрезвычайно приятный фрагмент цикла ниже был создан с использованием физики Ньютона в After Effects.

Простые элементы пользовательского интерфейса

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

Смайлики и стикеры

Все анимированные стикеры в Telegram — Lottie-анимация. Её использование значительно экономит трафик, поскольку приложение работает с данными, а не с видеофайлами.

Презентация логотипа

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

Улучшение веб-сайта

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

Инструменты создания анимации Lottie

Джойстики и слайдеры

Слайдеры Joysticks — это система превращения сложных систем оснастки, используемых при анимации тел, лиц и рук персонажей, в простой набор графических слайдеров и джойстиков. Чрезвычайно мощный инструмент, и его способность объединять множество независимых движущихся элементов в один экономит огромное количество времени и усилий. Персонаж создаётся с помощью системы джойстиков и экспортируется в файл Lottie с помощью Bodymovin.

Duik

Duik — это оригинальная система ригга с обратной кинематикой. Инструмент используется для соединения конечностей таким образом, чтобы аниматор мог расположить ступни и руки в нужном месте. Это основной инструмент для анимации в After Effects. 

Rubber Hose

Rubber Hose, созданный BattleAxe, — еще один отличный способ оснастить ваших персонажей. Обтекаемый, простой пользовательский интерфейс позволяет быстро и легко санимировать конечности, тросы, веревки. На анимации показано использование инструмента в механизме качелей.

Оригинал статьи: https://www.cubstudio.com/lottie-animations 

Мы используем куки на сайте.