HarmonyOS三方件開(kāi)發(fā)指南(15)-LoadingView功能介紹
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
1. LoadingView組件功能介紹
1.1. 功能介紹：
前言：
對(duì)于一些簡(jiǎn)單的動(dòng)畫(huà)我們開(kāi)發(fā)者可以使用系統(tǒng)提供的一些方法來(lái)實(shí)現(xiàn)，但是在實(shí)際開(kāi)發(fā)中設(shè)計(jì)師給出的動(dòng)畫(huà)都是很炫酷復(fù)雜的，如果采用手寫(xiě)代碼的方式，就要面對(duì)很多問(wèn)題：
(1) 如不同平臺(tái)要重復(fù)開(kāi)發(fā)，
(2) 開(kāi)發(fā)者和動(dòng)畫(huà)設(shè)計(jì)師之間的溝通問(wèn)題，
(3) 復(fù)雜動(dòng)畫(huà)對(duì)應(yīng)的代碼也非常復(fù)雜，后期維護(hù)困難等。
Lottie功能介紹：
Lottie是Airbnb 專(zhuān)門(mén)為移動(dòng)開(kāi)發(fā)設(shè)計(jì)的一個(gè)第三方開(kāi)源庫(kù)，他的優(yōu)點(diǎn)如下：
(1) 跨平臺(tái)(目前支持Android、iOS 、Web、React Native等平臺(tái))，本組件完成了Lottie再HarmonyOS上的移植。
(2) 設(shè)計(jì)師通過(guò)After Effects將動(dòng)畫(huà)導(dǎo)出JSON文件，然后由Lottie加載和渲染這個(gè)文件并轉(zhuǎn)成相應(yīng)的代碼，由于是JSON文件，文件也會(huì)很小，可以減少App包的大小。
(3) 把動(dòng)畫(huà)制作和APP開(kāi)發(fā)的工作分開(kāi)，由設(shè)計(jì)師來(lái)完成動(dòng)畫(huà)的制作
1.2. 模擬器上運(yùn)行效果：
2. Lottie使用方法
2.1. 新建工程，增加組件Har包依賴(lài)
在應(yīng)用模塊中添加HAR，只需要將lottie.har復(fù)制到entry\libs目錄下即可(由于build.gradle中已經(jīng)依賴(lài)的libs目錄下的*.har，因此不需要在做修改)。
2.2. 增加動(dòng)畫(huà)json文件
在resources/rawfile目錄下，放入動(dòng)畫(huà)對(duì)應(yīng)的json文件，如bullseye.json.
2.3. 修改主頁(yè)面的布局文件
修改主頁(yè)面的布局文件ability_main.xml，在Layout標(biāo)簽中增加app命名空間。
然后添加一個(gè)com.airbnb.lottie.LottieView組件，設(shè)置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開(kāi)發(fā)實(shí)現(xiàn)
3.1. 新建一個(gè)Module
新建一個(gè)Module，類(lèi)型選擇HarmonyOS Library，模塊名為lottie，如圖：
3.2. 主要類(lèi)介紹
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)));
- // 構(gòu)造compositionLayer
- compositionLayer = new CompositionLayer(
- null,
- LayerParser.parse(lottieComposition),
- lottieComposition.getLayers(),
- lottieComposition);
其中json文件大致說(shuō)明如下：
- {
- "w", // 0 寬度
- "h", // 1 高度
- "ip", // 2 其實(shí)幀
- "op", // 3 結(jié)束幀
- "fr", // 4 幀率
- "v", // 5 版本號(hào)
- "layers", // 6 圖層列表
- "assets", // 7 圖片資源列表
- "fonts", // 8 字體列表
- "chars", // 9 字體具體樣式
- "markers" // 10 遮蓋層列表
- }
其中assets圖片資源說(shuō)明如下：
- "assets": [
- {
- "id", // 0 圖片id
- "w", // 2 寬度
- "h", // 3 高度
- "p", // 4 圖片名稱(chēng)
- "u" // 5 圖片路徑
- }
- ]
- layers說(shuō)明如下：
- "layers": [
- {
- "nm", // 0 名稱(chēng)
- "ind", // 1 索引
- "refId", // 2 指向的資源id
- "ty", // 3 圖層類(lèi)型(0:復(fù)合型，1: Solid類(lèi)型 2:圖片類(lèi)型 4:Shape類(lèi)型 5:Text類(lèi)型)
- parent", // 4 父圖層
- "sw", // 5 Solid寬度
- "sh", // 6 Solid高度
- "sc", // 7 Solid顏色
- "ks", // 8 包含的動(dòng)畫(huà)
- "tt", // 9 遮蓋類(lèi)型
- "masksProperties", // 10 遮蓋列表
- "shapes", // 11 圖層包含的形狀元素
- "t", // 12 文本屬性
- "ef", // 13 填充效果(Lottie doesn't support layer effects)
- "sr", // 14 時(shí)間調(diào)整系數(shù)
- "st", // 15 圖層起始幀
- "w", // 16 圖層寬度
- "h", // 17 圖層高度
- "ip", // 18 圖層起始關(guān)鍵幀
- "op", // 19 圖層結(jié)束關(guān)鍵幀
- }
- ]
layers中shapes解析如下：
- "shapes": [
- {
- "ty", //類(lèi)型(如gr:圖形組, fl:圖形填充, sh:圖形路徑)
- "nm",//名稱(chēng)
- "hd", // 是否隱藏
- "it" // 圖形的軌跡集合
- [{
- "ind",//索引
- "ks", //動(dòng)畫(huà)關(guān)鍵幀
- {
- "t", // startFrame
- "s", // startValue
- "e", // endValue
- "o", // 動(dòng)畫(huà)起始點(diǎn)坐標(biāo)
- "i", // 動(dòng)畫(huà)結(jié)束點(diǎn)坐標(biāo)
- "h", // 插值器類(lèi)型
- "to", // 7 路徑切線1坐標(biāo)
- "ti" // 8 路徑切線2坐標(biāo)
- }
- }]
- }
- ]
3.4. 播放流程介紹
Lottie源碼播放調(diào)用棧梳理如下：
- 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庫(kù)模塊構(gòu)建為HAR包，構(gòu)建HAR包的方法如下：
在Gradle構(gòu)建任務(wù)中，雙擊PackageDebugHar或PackageReleaseHar任務(wù)，構(gòu)建Debug類(lèi)型或Release類(lèi)型的HAR。
待構(gòu)建任務(wù)完成后，可以在工程目錄中的loadingview> bulid > outputs > har目錄中，獲取生成的HAR包。
4.項(xiàng)目源碼
見(jiàn)github代碼倉(cāng)：https://github.com/isoftstone-dev/Lottie_HarmonyOS
更多原創(chuàng)，請(qǐng)關(guān)注"軟通動(dòng)力HarmonyOS學(xué)院https://harmonyos.51cto.com/column/30
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
