HarmonyOS三方件開發指南(15)-LoadingView功能介紹

作者：軟通田可輝 2021-03-31 09:50:25

開發 OpenHarmony

文章由鴻蒙社區產出，想要了解更多內容請前往：51CTO和華為官方戰略合作共建的鴻蒙技術社區https://harmonyos.51cto.com

[[390520]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

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. 模擬器上運行效果：

[[390521]]

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()