Анимация 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
