Ещё больше информации ищите в нашем блоге ;)

Lottie

В 2017 году инженеры Airbnb увидели потенциал анимации на основе JSON и вместе с лидером анимации создали библиотеки IOS и Android, которые смогли бы отображать файлы JSON, которые назвали «Lottie». Вы можете прочитать больше об истории здесь. Разработчики в Airbnb оставили исходный код открытым и создали сообщество GitHub для общения с дизайнерами и инженерами.

LottieFiles

LottieFiles — это независимая платформа от Airbnb, на которой дизайнеры могут загружать, тестировать, покупать и выгружать анимации.

Airbnb также являются создателями плагина LottieFiles для After Effects, который работает аналогично Bodymoving и позволяет нам просматривать анимацию, загружать её на платформу LottieFiles, сохранять на компьютере и т. д.

Приступим к работе

Для начала необходимо установить плагин, вы можете использовать Bodymovin или LottieFile.

Я создал для своего логотипа простую анимацию, которая будет отображаться в верхнем меню веб-сайта. Это дрон с вращающимися лопастями, поэтому я импортировал в слои файлы Illustrator, сделал спиральные 3D-слои и повернул их.

Будьте внимательны, не все эффекты поддерживаются этими форматами файлов. На сегодняшний день 3D-слои не поддерживаются. Поэтому, прежде чем делать анимацию, стоит проверить поддержку.

Следует заострить внимание

Создание анимации для Интернета — это не то же самое, что и создание традиционного видео. Мы должны принять во внимание несколько параметров настройки и форматирования, о которых нам никогда раньше не приходилось думать.

Вот список предложений, которыми делятся создатели Lottie:

• Файлы JSON должны быть как можно более компактными для мобильных продуктов;
• Используйте свои навыки After Effect, чтобы избежать лишних ключевых кадров, например, путем родительских функций вместо добавления ключевого кадра на каждом слое;
• Избегайте использования ключевых кадров пути, поскольку они создают очень большой документ из преобразования всей вершины из пути;
• Лучше всего избегать покачивания, автоматической трассировки и аналогичных методов, которые создают большое количество ключевых кадров. Создание такого большого файла может сделать файл JSON очень большим и негативно повлиять на производительность;
• Преобразуйте любой слой Illustrator, EPS, SVG или PDF для формирования слоёв в After Effects, в противном случае это приведёт к ошибке;
• Экспорт в 1X при экспорте файла каждый пиксель на иллюстрации будет переведён в точки для IOS и DPS для Android; Вот набор метрик устройств в DPS, которые Google собрал вместе;
• Lottie пока не поддерживает выражения или эффекты;
• Режимы наложения, а конкретно: «Умножение», «Экран» или «Добавить» пока не поддерживаются, а также не отображаются с помощью Luma;
• Стили слоёв (тень, наложение, обводка...) пока не поддерживаются; Нули могут быть использованы, но для их работы необходимо включить видимость и изменить непрозрачность до 0%.

Зная все нюансы, приступим к работе

Импортируйте слои, откройте композицию, выберите все слои, щелкните правой кнопкой мыши и выберите: Создать / создать фигуру из векторных слоёв.

Это создаст векторные слои, которые не доставят нам хлопот при экспорте в Lottie.

Нам нужно удалить AI-файлы и работать только с векторными слоями.

Я хотел анимировать лопасти в 3D, но поскольку они не поддерживаются, мне пришлось делать это «традиционным способом» и поэтому я симулировал вращение, анимируя размер в X (ширина).

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

Как мы читали ранее, нулевые объекты должны быть превращены в видимые и иметь 0% прозрачности, чтобы работать.

После того, как у меня появилась анимация, я захотел открыть расширение Lottie.

Откроется окно, где вы можете просмотреть анимацию, загрузить её в Lottie-файлы и сохранить на своем компьютере. Для этого вам уже нужно иметь аккаунт в LottieFiles.

Заключение

Этот способ создания анимации для веб-сайтов действительно интересен, поскольку он сохраняет отличное качество и прост в реализации.

Оригинал статьи