Анонс 1.13.5.0 и Lottie анимация
Entry posted by Yaroslav Brovin in Общая
1,026 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)
Немного о Lottie
Lottie - это библиотека с открытым кодом от компании Airbnb для проигрывания анимации, созданной в приложении Adobe After Effects.
Впервые дизайнеры могут создавать и доставлять красивые анимации без того, чтобы разработчик кропотливо воссоздавал их вручную.
Анимация представляет собой текстовый файл в формате JSON, в котором содержится описание построения векторного изображения с анимацией. Благодаря чему, файл анимация весит очень мало при этом не теряя в качестве.
В библиотеку добавлен новый компонент TfgLottieImage, который позволяет отобразить Lottie анимацию.
Как использовать?
1. Для начала надо раздобыть файл анимации. Можно поискать готовые анимации от дизайнеров на ресурсе https://lottiefiles.com/ .
Помимо этого ресурса, есть еще и другие. Например, ресурс по встраиванию анимированных иконок: https://lordicon.com/
После выбора интересуемой анимации, скачиваем анимацию в формате Lottie JSON. Например, такая анимация ракеты весит всего 25 КБ:
2. После этого добавляем этот файл анимации в дизайнер ресурсов FGX Native. Добавлен новый тип ресурса "Lottie Анимация":
После создания нового ресурса, загружаем скаченный ранее файл. В результате чего дизайнер отобразит вам ваш файл анимации. Укажите ресурсу понятное имя, например "Animations\Red Rocket".
Разместив на форме новый компонент TfgLottieImage, укажите ресурс анимации через свойство AnimationName.
Это все, что требуется, чтобы запустить ракету в космос. Запустив приложение на Android или iOS вы увидите летящую ракету.
Демонстрационный пример
В поставку включен новый демо-пример "Компоненты" -> "TfgLottieImage" -> "Проигрыватель Lottie анимации".
Настройки
Компонент предлагает базовые настройки.
- ImageMode - Режим отображения изображения (растянуть, вписать, заполнить).
- Loop - нужно ли запускать анимацию по кругу.
- Speed - коэффициент скорости. Например: 2 - проигрывать анимацию в два раза быстрее, 0.5 - в два раза медленнее.
- Duration - длительность анимации в мсек (без учета Speed).
Помимо этого, вы можете проверить проигрывается ли сейчас анимация IsAnimating или управлять воспроизведением через:
- Play - начать воспроизведение с начала
- Stop - остановить (Progress сбрасывается на начало).
- Pause - приостановить
- Resume - продолжить с текущего места.
- Progress - установить текущее место воспроизведения. Коэффициент из диапазона [0..1], где 0 - это начало, 1 - конец.
Итоги
Уверены, данная новинка найдет свое применение в ваших проектах и добавит им изюминки.
-
10
-
4
3 Comments
Recommended Comments