Важно (9.07.22)

Если картинки в постах не отображаются, зайдите в блог через прокси. РКН заблокировал поддомены blogger.com на которые загружались картинки.

воскресенье, 20 марта 2022 г.

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».


Добавление анимации.

  1. Открываем/создаём проект
  2. Открываем FGX Assets Manager (Project -> FGX Assets Manager)
  3. Жмём по кнопке «Добавления файла анимации» (выделена красным цветом)
  4. Жмём открыть (выделена зелёным цветом), выбираем JSON файл анимации, сразу после этого файл начнёт проигрываться прямо в FGX Assets Manager. Если необходимо переименовываем ресурс в левом столбце. Жмём кнопку «Сохранить» (выделена синим цветом).

  5. Кидаем на форму компонент TfgLottieImage и указываем ресурс в свойстве AnimationName. В случае с демо проектом, необходимо указать путь до ресурса в файле Form.AnimationPicker.pas.

  6. Всё, собираем приложение, запускаем на устройстве (мой результат ниже).

 

Демонстрация.


 

Описание компонента TfgLottieImage.

Основные свойства:

  • AnimationName – Тут указываем путь до ресурса с анимацией, хранящейся в Asset Manager.
  • AutoPlay – Автоматическое проигрывание анимации после загрузки (По умолчанию: Включено).
  • Duration – Длительность анимации.
  • ImageMode – Режим отображения анимации (AspectFit - вписать, AspectFill - заполнить, Stretch – растянуть. По умолчанию: AspectFit)
  • Loop – Зацикливание анимации (По умолчанию: Включено).
  • Speed – Скорость проигрывания анимации (По умолчанию: 1).
  • Progress – Текущее значение проигрывания, в диапазоне от 0 до 1.


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

  • Play – Начать проигрывание
  • Stop – Остановить проигрывание
  • Pause – Приостановить проигрывание
  • Resume – Продолжить проигрывание с места приостановки.
  • IsAnimationLoaded – Загружена ли анимация?
  • IsAnimating – Проигрывается ли анимация?


В общем, функционал очень полезный. Например, если нужно как-то нестандартно анимировать процесс загрузки чего-либо и т.п. Рекомендую попробовать.