Lottie: векторная анимация в баннерах

Знакомимся с Lottie — форматом легкой векторной анимации для рекламных баннеров.

Что такое Lottie

Lottie — это легкий формат анимации на основе JSON-кода. По сути это текстовый файл, который описывает движение векторных объектов (линий, фигур, точек). Браузер или приложение считывают этот код и отрисовывают графику в реальном времени.

Lottie-анимация бесконечно масштабируется без появления пикселей и весит в десятки раз меньше, чем GIF или видео. Помимо экономии места, формат дает возможность работать с интерактивностью — настроить запуск анимации по наведению курсора или привязать движение на баннере к скроллу или кликам.

Где взять Lottie-анимацию

Основной источник готовых анимаций — специализированные библиотеки вроде lottiefiles.com. Там доступны тысячи бесплатных и платных файлов, которые можно сразу использовать в работе.

Если же нужно создать уникальную анимацию, дизайнеры обычно используют Adobe After Effects с плагином Bodymovin. Он конвертирует готовый проект из After Effects в тот самый JSON-файл, который понимает плеер Lottie.

Библиотека Lottie-анимаций lottiefiles.com

Как работать с Lottie в deaz.io

В редакторе deaz.io поддержка Lottie реализована через вкладку Elements. Чтобы добавить анимацию в проект, достаточно загрузить подготовленный JSON-файл.

После добавления элемента на канвас можно сразу отрегулировать скорость и зацикливание (Loop) анимации, а сами объекты Lottie — свободно масштабировать и перемещать по макету без потери качества. При экспорте система автоматически собирает HTML5-архив так, чтобы анимация корректно отображалась на выбранной площадке — баннер готов к загрузке в рекламный кабинет сразу после скачивания.

Работа с Lottie-файлами в deaz.io

Попробовать deaz.io в действии

Получите бесплатный доступ к платформе и обучению