1. LoadingView元件功能介紹
1.1. 功能介紹：
前言：
對于一些簡單的動畫我們開發者可以使用系統提供的一些方法來實作，但是在實際開發中設計師給出的動畫都是很炫酷複雜的，如果采用手寫代碼的方式，就要面對很多問題：
(1) 如不同平台要重複開發，
(2) 開發者和動畫設計師之間的溝通問題，
(3) 複雜動畫對應的代碼也非常複雜，後期維護困難等。
Lottie功能介紹：
Lottie是Airbnb 專門為移動開發設計的一個第三方開源庫，他的優點如下：
(1) 跨平台（目前支援Android、iOS 、Web、React Native等平台），本元件完成了Lottie再HarmonyOS上的移植。
(2) 設計師通過After Effects将動畫導出JSON檔案，然後由Lottie加載和渲染這個檔案并轉成相應的代碼，由于是JSON檔案，檔案也會很小，可以減少App包的大小。
(3) 把動畫制作和APP開發的工作分開，由設計師來完成動畫的制作
1.2. 模拟器上運作效果：
2. Lottie使用方法
2.1. 建立工程，增加元件Har包依賴
在應用子產品中添加HAR，隻需要将lottie.har複制到entry\libs目錄下即可（由于build.gradle中已經依賴的libs目錄下的*.har，是以不需要在做修改）。
2.2. 增加動畫json檔案
在resources/rawfile目錄下，放入動畫對應的json檔案，如bullseye.json.
2.3. 修改首頁面的布局檔案
修改首頁面的布局檔案ability_main.xml，在Layout标簽中增加app命名空間。
然後添加一個com.airbnb.lottie.LottieView元件，設定LottieView_jsonFile屬性。
全部代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
xmlns:app="http://schemas.huawei.com/apk/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<com.airbnb.lottie.LottieView
ohos:id="$+id:lottieView"
ohos:height="match_content"
ohos:width="match_content"
app:LottieView_jsonFile = "resources/rawfile/bullseye.json"
/>
</DirectionalLayout>
3. Lottie開發實作
3.1. 建立一個Module
建立一個Module，類型選擇HarmonyOS Library，子產品名為lottie，如圖
3.2. 主要類介紹
3.3. JSON解析流程介紹
// 解析json檔案，擷取InputStream
ResourceManager resourceManager = getContext().getResourceManager();
RawFileEntry rawFileEntry = resourceManager.getRawFileEntry(jsonFile);
resource = rawFileEntry.openRawFile();
// 解析json檔案,傳回lottieComposition
JsonReader reader = JsonReader.of(buffer(source(resource)));
// 構造compositionLayer
compositionLayer = new CompositionLayer(
null,
LayerParser.parse(lottieComposition),
lottieComposition.getLayers(),
lottieComposition);
其中json檔案大緻說明如下：
文章後續内容和相關附件可以點選下面的原文連結前往學習
原文連結： https://harmonyos.51cto.com/posts/3659#bkwz
想了解更多關于鴻蒙的内容，請通路：
51CTO和華為官方合作共建的鴻蒙技術社群
https://harmonyos.51cto.com/#bkwz