Lottie анимации
Iana Nosova
Последнее обновление год назад
Меньший вес — анимации в 2-10 раз легче аналогичных GIF
Безупречное качество — векторная графика без пикселизации
Гибкость — возможность масштабирования без потери качества
Интерактивность — поддержка взаимодействия с пользователем
Создайте анимацию в Adobe After Effects.
Установите плагин Bodymovin (бесплатное расширение).
Экспортируйте анимацию через Bodymovin в формат JSON.
На левой панели выберите вкладку Elements.
Найдите раздел Lottie.
Нажмите Open Lottie animations и загрузите ваш JSON-файл.
Помимо стандартных параметров элементов, в разделе Set up animation можно дополнительно настроить параметры воспроизведения:
Loop animation — зацикливание анимации
Play On Hover — воспроизведение при наведении курсора
- Анимации могут не отображаться при локальном просмотре
- На рекламных платформах работают корректно
Оптимизация:
- Упрощайте сложные анимации
- Уменьшайте количество кадров для легких файлов
- Используйте минимально необходимую длительность
Совместимость:
- Поддерживается всеми современными браузерами
- Работает на мобильных устройствах
- Совместима с большинством рекламных платформ
Для фоновых анимаций используйте режим зацикливания
Для интерактивных элементов активируйте Play On Hover
ВАЖНО: Заранее ознакомьтесь с техническими требованиями площадки, на которой собираетесь размещаться.
Тестируйте анимации непосредственно на рекламной платформе
Сохраняйте исходные AE-файлы для возможных правок
Lottie — это мощный инструмент для создания легких, качественных анимаций, который открывает новые возможности для дизайнеров баннеров. При правильном использовании он позволяет реализовать сложные анимационные идеи без ущерба для производительности.