Delphi разработка под Android: FGX Native и Lottie анимация

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.

Основные методы: