Lottie — это библиотека для iOS, Android, Windows и Web, которая позволяет визуализировать анимацию, созданную в Adobe After Effects. (Официальный сайт Lottie)
Adobe After Effects – это мощное программное обеспечение для создания как простых анимаций, так и профессиональных эффектов, используемых в кино и рекламных роликах. (Официальная сайт Adobe After Effects)
Поддержка библиотеки Lottie в FGX появилась с версии 1.13.5.0. (Официальный сайт FGX Native)
Что необходимо знать, перед тем как добавить анимацию в своё приложение.
- Библиотека Lottie использует векторные файлы анимации, закодированные в JSON формате. JSON файлы весят очень мало (килобайты) и не обладают ограничениями, которые есть у других форматов.
- Готовые файлы анимаций можно найти на сайте LottieFiles и др.
- Если вы хотите добавить свой файл анимации из Adobe After Effects, то для этого анимацию нужно экспортировать в JSON файл. Делается это с помощью плагина Bodymovin (Официальная страница на GitHub или Официальный сайт с описанием плагина). Так же необходимо учесть, что Lottie поддерживает не все возможности Adobe After Effects (Официальная таблица с возможностями), однако постоянно развивается.
Как это выглядит.
Теперь посмотрим, что из себя представляет Lottie в FGX. Для начала скачайте JSON файл анимации или создайте его самостоятельно.
Примечание. В комплекте FGX Native есть демо проект «LottieDemo» (Демо проекты FGX Native -> Компоненты -> TfgLottieImage -> Проигрыватель Lottie анимации), который содержит несколько JSON файлов анимаций, для начала можно воспользоваться им.
Мне было интересно попробовать создать свою анимацию, поэтому в примере ниже я использовал свои json файлы для анимации логотипа библиотеки FGX Native. Процесс рисования логотипа и создания анимации я опущу, сразу перейдём к добавлению анимации в приложение и управлением её свойствами. В примере, в качестве приложения используется демо проект «LottieDemo».
Добавление анимации.
- Открываем/создаём проект
- Открываем FGX Assets Manager (Project -> FGX Assets Manager)
- Жмём по кнопке «Добавления файла анимации» (выделена красным цветом)
- Жмём открыть (выделена зелёным цветом), выбираем JSON файл анимации, сразу после этого файл начнёт проигрываться прямо в FGX Assets Manager. Если необходимо переименовываем ресурс в левом столбце. Жмём кнопку «Сохранить» (выделена синим цветом).
- Кидаем на форму компонент TfgLottieImage и указываем ресурс в свойстве AnimationName. В случае с демо проектом, необходимо указать путь до ресурса в файле Form.AnimationPicker.pas.
- Всё, собираем приложение, запускаем на устройстве (мой результат ниже).
Демонстрация.
Описание компонента TfgLottieImage.
Основные свойства:
- AnimationName – Тут указываем путь до ресурса с анимацией, хранящейся в Asset Manager.
- AutoPlay – Автоматическое проигрывание анимации после загрузки (По умолчанию: Включено).
- Duration – Длительность анимации.
- ImageMode – Режим отображения анимации (AspectFit - вписать, AspectFill - заполнить, Stretch – растянуть. По умолчанию: AspectFit)
- Loop – Зацикливание анимации (По умолчанию: Включено).
- Speed – Скорость проигрывания анимации (По умолчанию: 1).
- Progress – Текущее значение проигрывания, в диапазоне от 0 до 1.
Основные методы:
- Play – Начать проигрывание
- Stop – Остановить проигрывание
- Pause – Приостановить проигрывание
- Resume – Продолжить проигрывание с места приостановки.
- IsAnimationLoaded – Загружена ли анимация?
- IsAnimating – Проигрывается ли анимация?
В общем, функционал очень полезный. Например, если нужно как-то нестандартно анимировать процесс загрузки чего-либо и т.п. Рекомендую попробовать.