Введение
Я с трудом могу представить себе какое-либо приложение без анимации, причудливого дизайна, по крайней мере, на экране есть один компонент, который является интерактивным. Все это сводится к одному аспекту — пользовательскому опыту, который является ключевым фактором, который необходимо учитывать при разработке приложений.
Пользовательский опыт включает в себя все аспекты взаимодействия конечного пользователя с компанией, ее услугами и продуктами.
— Дон Норман, когнитивный ученый и архитектор пользовательского опыта
Для разработчика жизненно важная роль заключается в проектировании, выведении функциональных возможностей и многом другом, поэтому концентрация на аспектах дизайна становится утомительной.
Благодаря таким библиотекам, как Lottie, которая является полноценной такой библиотекой, анимация может быть реализована в вашем приложении без особых усилий и с минимальными начальными настройками.
Lottie
Если вы еще не слышали о Lottie, то давайте разберемся, что это за библиотека и в чем ее особенности.
-
Lottie — это библиотека, которая может быть использована на сайте или в мобильном приложении для добавления анимации.
-
Это универсальное решение для анимации, которое идеально подходит для разработчиков, поскольку вам нужно всего лишь добавить несколько строк кода, и все готово, не правда ли, удивительно.
-
Lottie — это библиотека для Android, iOS, Web и Windows, которая анализирует анимацию Adobe After Effects, экспортированную в json с помощью Bodymovin, и отображает ее на мобильных устройствах и в Интернете!
Более подробную информацию о Lottie можно найти здесь.
Используем ли мы Lottie только для анимации или в этом пакете у него больше возможностей, я перечислил некоторые из них ниже.
- Создание, редактирование и отправка в несколько кликов.
- Мы можем отказаться от длинных кодов, просто реализовать анимацию, а остальное возьмет на себя библиотека.
- Совместимость со всеми браузерами.
- Простота в использовании.
Это идеальный выбор для создания привлекательного пользовательского опыта с помощью анимации, тогда Lottie — это библиотека или инструмент.
Поскольку мы собрали много информации о Lottie, теперь давайте посмотрим, как использовать Lottie в вашем мобильном приложении HarmonyOS, а также необходимые процессы или настройки.
Если вы новичок в **HarmonyOS **, ознакомьтесь со статьями о HarmonyOS здесь.
Более подробную информацию о библиотеке Lottie можно найти здесь
Пошаговая реализация
1.DevEco Studio
Здесь мы будем использовать IDE DevEco studio, которая предназначена исключительно для запуска приложений HarmonyOS, если вы еще не установили ее, то вы можете получить ее по официальной ссылке с SDK. Также у нас есть пошаговая инструкция по настройке среды, доступная здесь.
2.Создание проекта
После запуска DevEco Studio вы можете создать **»File» -> New -> New Project Option, **потом вам будет предложено несколько шаблонов на выбор, выберите шаблон, как показано ниже — Empty Ability.
В качестве следующего шага вам нужно будет «Настроить проект» с деталями проекта, путем и убедитесь, что вы выбрали
- Язык как Java и
- версия API — 5
После первоначальной настройки вы готовы начать работу над приложением.
3.Зависимость
Далее добавьте зависимость Lottie, для того чтобы использовать библиотеку в вашем мобильном приложении HarmonyOS, вам необходимо сначала установить ее, добавив нижеуказанную зависимость в файл entry/build.gradle.
dependencies {
implementation fileTree(dir: 'libs', include: ['*.har'])
implementation 'io.openharmony.tpc.thirdlib:lottie-ohos:1.0.4'
}
4.Настройки сети
Перейдите к файлу resources -> config.json и добавьте приведенные ниже строки кода для доступа к интернету.
{
"app": {
"bundleName": "com.airbnb.lottie.demo",
"vendor": "airbnb",
"version": {
"code": 1000000,
"name": "1.0.0"
}
},
"deviceConfig": {},
"module": {
"package": "com.airbnb.lottie.demo",
"name": ".Lottie",
"reqCapabilities": [
"video_support"
],
"deviceType": [
"default",
"tablet"
],
"distro": {
"deliveryWithInstall": true,
"moduleName": "entry",
"moduleType": "entry",
"installationFree" : true
},
"abilities": [
{
"skills": [
{
"entities": [
"entity.system.home"
],
"actions": [
"action.system.home"
]
}
],
"orientation": "portrait",
"name": "com.airbnb.lottie.demo.MainAbility",
"icon": "$media:icon",
"description": "$string:mainability_description",
"label": "$string:app_name",
"type": "page",
"launchType": "standard"
}
],
"reqPermissions": [
{
"name": "ohos.permission.INTERNET",
"reason": "get right",
"usedScene": {
"ability": [
"com.airbnb.lottie.demo.MainAbility"
],
"when": "always"
}
}
]
}
}
-
В HarmonyOS загрузка анимации Lottie проста и требует 3 шага, как указано ниже.
-
Строка URL — URL передается в качестве параметра в функцию setFilename(), которую необходимо загрузить.
-
Счетчик повторений — передается функции setRepeatCount.Библиотека Lottie должна отобразить анимацию в соответствии с указанным количеством повторений.
-
Цель — Передается через функцию setAnimationData(). Этот параметр будет представлять компоненты LottieAnimationView и Target, в которых, как предполагается, будет отображаться ваша анимация Lottie.
6.Реализация — Здесь мы загружаем Lottie json, найденный в интернете, в компонент LottieAnimationView:
- давайте определим файл макета, вы можете найти макет, перейдя по следующему пути «entry» -> src-> resources ->base -> layout ->animation_slice.xml
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:alignment="center"
ohos:orientation="vertical">
<com.airbnb.lottie.LottieAnimationView
ohos:id="$+id:animationView"
ohos:width="match_parent"
ohos:height="match_parent"/>
</DirectionalLayout>
ПРИМЕЧАНИЕ: LottieAnimationView присутствуют в папке resource/raw, для более подробной информации вы можете обратиться к этой ссылке.
7. Получите ссылку на компонент LottieAnimationView
//Initialize LottieAnimationView Component
LottieAnimationView lv = (LottieAnimationView)rootLayout.findComponentById(ResourceTable.Id_animationView);
8.Загрузка lottieJson, присутствующего на сервере
Теперь, когда у вас есть ссылка на компонент LottieAnimationView, вы можете написать код для загрузки анимации в компонент LottieAnimationView.
private void initLottieViews(String string, String bundleKey, int repeatCount) {
L.setTraceEnabled(true);
LottieAnimationView lv = (LottieAnimationView)rootLayout.findComponentById(ResourceTable.Id_animationView);
lv.setContentPosition((float)50.0,(float)50.0);
LottieAnimationViewData data = new LottieAnimationViewData();
if(bundleKey.equals(KEY_JSON_STRING) && string!=null) {
data.setFilename(string);
}
else {
data.setUrl(string);
}
data.setRepeatCount(repeatCount);
data.autoPlay = true;
lv.setAnimationData(data);
}
Вы можете найти приведенный выше код здесь
Список публичных API для разработчика приложений
Приведенные ниже публичные методы помогут нам оперировать компонентом во время выполнения.
- setContentPosition(float x, float y)
- setAnimationData(LottieAnimationViewData data)
- setRepeatCount(int count)
- setFilename(String name)
- setUrl(String url)
- setResId(int id)
Теперь давайте посмотрим пару примеров загрузки анимации из разных источников.
1. Загрузка анимации Lottie из папки.
В этом примере мы загрузим анимацию Lottie, которая хранится в папке res/raw. Для более подробной информации вы можете обратиться к этой ссылке.
Layout.xml:
<com.airbnb.lottie.LottieAnimationView
ohos:id="$+id:animationView"
ohos:width="match_parent"
ohos:height="match_parent"/>
Java Slice:
LottieAnimationViewData data = new LottieAnimationViewData();
data.setUrl(string);
data.setRepeatCount(repeatCount);
data.autoPlay = true;
lv.setAnimationData(data);
- Загрузка Lottie из URL
Здесь вы можете посмотреть, как загружается и используется URL.
Layout.xml:
<com.airbnb.lottie.LottieAnimationView
ohos:id="$+id:animationView"
ohos:width="match_parent"
ohos:height="match_parent"/>
Java Slice:
LottieAnimationViewData data = new LottieAnimationViewData();
data.setUrl(stringURL);
data.setRepeatCount(repeatCount);
data.autoPlay = true;
lv.setAnimationData(data);
Заключение
Итак, в этом посте вы, должно быть, поняли, как пользовательский
опыт пользователя играет жизненно важную роль и как Lottie приходит на помощь, предоставляя этот замечательный полный пакет удивительных анимаций.
Позже мы также увидели, как можно легко внедрить анимации Lottie в HarmonyOS из URL или локального хранилища.
Более подробную информацию о библиотеке Lottie можно найти здесь