База знаний Appliner
Анимация Lottie
Компонент Анимация Lottie позволяет размещать на веб-страницах элементы анимации Lottie — популярного формата анимационных файлов на основе JSON. Это помогает разнообразить экранные формы, делать их оригинальными, нескучными и современными.
Особенности Lottie-анимаций:
- Малый размер файла. Анимации Lottie значительно меньше по размеру по сравнению с GIF или MP4 при сохранении качества.
- Масштабируемость. Поскольку анимации основаны на векторах, их можно увеличивать или уменьшать без потери качества.
- Мультиплатформенность. Lottie-анимации можно использовать на разных платформах без модификаций.
- Интерактивность. Элементы анимации можно сделать интерактивными, чтобы они реагировали на прокрутку, нажатия, наведение курсора и другие взаимодействия.
 |
Для того, чтобы разместить на странице элемент анимации, перетащите иконку компонента Lottie анимация из коллекции “Контекст”. |
| Дальнейшие действия и настройки осуществляются с помощью инструментов, расположенных во вкладке “Настройки” в правой части экрана. | |
 |
Загрузить анимированное изображение на страницу можно двумя способами: 1. В поле Данные анимации вводится непосредственно файл анимации в формате JSON. 2. В поле Ссылка анимации вводится URL-адрес анимации. |
 |
Зациклить – чекбокс устанавливается, если необходимо, чтобы проигрывать анимированное изображение по кругу без остановки, автоматически возвращаясь в начало после каждого финального кадра. Автозапуск – чекбокс устанавливается для того, чтобы изображение автоматически проигрывалось, когда пользователь попадает на страницу с изображением. То есть, для запуска не требуется никакий действий пользователя. Ширина/Высота – указывается точный или относительный размер анимации. Подробнее о применении различных единиц измерения – здесь. Скорость – указывается скорость проигрывания анимации. 1=100% Задержка анимации – указывается время задержки запуска в миллисекундах. Направление – анимация может проигрываться как вперед, так и назад. Пауза при наведении – данный чекбокс регулирует “замирание” анимации при наведении курсора. Проиграть при наведении – данный чекбокс запускает проигрывание анимации при наведении курсора (если для нее не был установлен автозапуск). Масштабировать – увеличивает масштаб изображения при сохранении “рамочного” размера, установленного параметрами Ширина/Высота. Цвет фона – устанавливает цвет фона для анимации. Может быть прямо прописан цвет (например, grey или yellow) или указан HTML код цвета (например, #00f57b), или цвет может быть выбран из предлагаемй палитры. URL анимируемого изображения – |