Jump to content

Анонс 1.13.5.0 и Lottie анимация


Yaroslav Brovin

886 views

В этом году нас ждет большое количество новых компонентов и возможностей в библиотеке FGX Native: начиная о завершении добавления iOS платформы в библиотеки, продолжая всевозможными интеграциями мобильных сервисов (оплата, идентификация, встроенные покупки и тд) и заканчивая разработкой новых визуальных компонентов. 

В последнем релизе 1.13.4.0 мы уже анонсировали добавление сервисов идентификации пользователя в сторонних сервисах. Сервисы идентификации позволяют получить информацию о пользователе используя его учетную запись в других сервисах, таких как GoogleId, AppleID, Facebook, VKontakte и тд. В релизе 1.13.4.0 мы разработали низкоуровневую кроссплатформенную архитектуру сервисов идентификации, которая позволяет нам и вам добавлять реализации любых сервисов идентификации пользователя. Первым таким сервисом стала реализация AppleID (TfgAppleIdAuthenticationClient). На подходе Facebook и другие сервисы. Детально о том, как установить и использовать разработанные компоненты мы поговорим в отдельных статьях.

В этой статье нам хотелось бы поделиться одним очень мощным и полезным новым компонентом, которые позволит легко оживить ваше приложение и добавить в него сложные анимации. Речь пойдет о поддержке анимации Airbnb Lottie (https://airbnb.io/lottie)

95171-colors.gif84872-disconnected.gif

 

Немного о Lottie

Lottie - это библиотека с открытым кодом от компании Airbnb для проигрывания анимации, созданной в приложении Adobe After Effects.

Впервые дизайнеры могут создавать и доставлять красивые анимации без того, чтобы разработчик кропотливо воссоздавал их вручную.

Анимация представляет собой текстовый файл в формате JSON, в котором содержится описание построения векторного изображения с анимацией. Благодаря чему, файл анимация весит очень мало при этом не теряя в качестве. 

В библиотеку добавлен новый компонент TfgLottieImage, который позволяет отобразить Lottie анимацию.

Как использовать?

1. Для начала надо раздобыть файл анимации. Можно поискать готовые анимации от дизайнеров на ресурсе https://lottiefiles.com/ .

image.png

Помимо этого ресурса, есть еще и другие. Например, ресурс по встраиванию анимированных иконок: https://lordicon.com/ 

image.png

После выбора интересуемой анимации, скачиваем анимацию в формате Lottie JSON. Например, такая анимация ракеты весит всего 25 КБ:

2. После этого добавляем этот файл анимации в дизайнер ресурсов FGX Native. Добавлен новый тип ресурса "Lottie Анимация":

image.png

После создания нового ресурса, загружаем скаченный ранее файл. В результате чего дизайнер отобразит вам ваш файл анимации. Укажите ресурсу понятное имя, например "Animations\Red Rocket".

image.png

Разместив на форме новый компонент TfgLottieImage, укажите ресурс анимации через свойство AnimationName

image.png

Это все, что требуется, чтобы запустить ракету в космос. Запустив приложение на Android или iOS вы увидите летящую ракету.

Демонстрационный пример

В поставку включен новый демо-пример "Компоненты" -> "TfgLottieImage" -> "Проигрыватель Lottie анимации".

Настройки 

Компонент предлагает базовые настройки.

  • ImageMode - Режим отображения изображения (растянуть, вписать, заполнить).
  • Loop - нужно ли запускать анимацию по кругу.
  • Speed - коэффициент скорости. Например: 2 - проигрывать анимацию в два раза быстрее, 0.5 - в два раза медленнее.
  • Duration - длительность анимации в мсек (без учета Speed).

Помимо этого, вы можете проверить проигрывается ли сейчас анимация IsAnimating или управлять воспроизведением через:

  • Play - начать воспроизведение с начала
  • Stop - остановить (Progress сбрасывается на начало).
  • Pause - приостановить
  • Resume - продолжить с текущего места.
  • Progress - установить текущее место воспроизведения. Коэффициент из диапазона [0..1], где 0 - это начало, 1 - конец.

Итоги

Уверены, данная новинка найдет свое применение в ваших проектах и добавит им изюминки. 

  • Like 10
  • Thanks 4

3 Comments


Recommended Comments

So great News ( LET OUR FRAMEWORK ) grows;
guys you did a great JOB, just keep it up .

Edited by randydom
  • Like 3
  • Thanks 1
Link to comment
Guest
Add a comment...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...