目錄：
1. LoadingView元件功能介紹
2. Lottie使用方法
3. Lottie開發實現
4.《HarmonyOS三方件開發指南》系列文章合集
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檔案大致說明如下：
{ "w", // 0 寬度 "h", // 1 高度 "ip", // 2 其實幀 "op", // 3 結束幀 "fr", // 4 幀率 "v", // 5 版本號 "layers", // 6 圖層列表 "assets", // 7 圖片資源列表 "fonts", // 8 字型列表 "chars", // 9 字型具體樣式 "markers" // 10 遮蓋層列表 }
其中assets圖片資源說明如下：
"assets": [ { "id", // 0 圖片id "w", // 2 寬度 "h", // 3 高度 "p", // 4 圖片名稱 "u" // 5 圖片路徑 } ]
layers說明如下：
"layers": [ { "nm", // 0 名稱 "ind", // 1 索引 "refId", // 2 指向的資源id "ty", // 3 圖層型別(0:複合型，1: Solid型別 2:圖片型別 4:Shape型別 5:Text型別) parent", // 4 父圖層 "sw", // 5 Solid寬度 "sh", // 6 Solid高度 "sc", // 7 Solid顏色 "ks", // 8 包含的動畫 "tt", // 9 遮蓋型別 "masksProperties", // 10 遮蓋列表 "shapes", // 11 圖層包含的形狀元素 "t", // 12 文字屬性 "ef", // 13 填充效果(Lottie doesn't support layer effects) "sr", // 14 時間調整係數 "st", // 15 圖層起始幀 "w", // 16 圖層寬度 "h", // 17 圖層高度 "ip", // 18 圖層起始關鍵幀 "op", // 19 圖層結束關鍵幀 } ]
layers中shapes解析如下：
"shapes": [
{ "ty", //型別(如gr:圖形組, fl:圖形填充, sh:圖形路徑) "nm",//名稱 "hd", // 是否隱藏 "it" // 圖形的軌跡集合 [{ "ind",//索引 "ks", //動畫關鍵幀 { "t", // startFrame "s", // startValue "e", // endValue "o", // 動畫起始點座標 "i", // 動畫結束點座標 "h", // 插值器型別 "to", // 7 路徑切線1座標 "ti" // 8 路徑切線2座標 } }] } ]
3.4. 播放流程介紹
Lottie原始碼播放呼叫棧梳理如下：
LottieDrawable.draw()
drawInternal()
drawWithOriginalAspectRatio()
baseLayer.draw()
compositionLayer.drawLayer()
baseLayer.draw()
compositionLayer.drawLayer()
baseLayer.draw()
ShapeLayer.drawLayer()
ContentGroup.draw()
FillContent.draw() or StrokeContent.draw()
3.5. 主流程介紹
3.6. 編譯HAR包
利用Gradle可以將HarmonyOS Library庫模組構建為HAR包，構建HAR包的方法如下：
在Gradle構建任務中，雙擊PackageDebugHar或PackageReleaseHar任務，構建Debug型別或Release型別的HAR。
待構建任務完成後，可以在工程目錄中的loadingview> bulid > outputs > har目錄中，獲取生成的HAR包。
4.專案原始碼
見github程式碼倉：https://github.com/isoftstone-dev/Lottie_HarmonyOS
更多原創，請關注"軟通動力HarmonyOS學院https://harmonyos.51cto.com/column/30
作者：軟通田可輝
想了解更多內容，請訪問51CTO和華為合作共建的鴻蒙社群：https://harmonyos.51cto.com