小说阅读网,如何发布网络小说,辰东完美世界有声小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

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

[[390520]]

想了解更多內(nèi)容，請訪問：

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.

1. LoadingView組件功能介紹

1.1. 功能介紹：

前言：

對于一些簡單的動畫我們開發(fā)者可以使用系統(tǒng)提供的一些方法來實現(xiàn)，但是在實際開發(fā)中設(shè)計師給出的動畫都是很炫酷復(fù)雜的，如果采用手寫代碼的方式，就要面對很多問題：

(1) 如不同平臺要重復(fù)開發(fā)，

(2) 開發(fā)者和動畫設(shè)計師之間的溝通問題，

(3) 復(fù)雜動畫對應(yīng)的代碼也非常復(fù)雜，后期維護(hù)困難等。

Lottie功能介紹：

Lottie是Airbnb 專門為移動開發(fā)設(shè)計的一個第三方開源庫，他的優(yōu)點如下：

(1) 跨平臺(目前支持Android、iOS 、Web、React Native等平臺)，本組件完成了Lottie再HarmonyOS上的移植。

(2) 設(shè)計師通過After Effects將動畫導(dǎo)出JSON文件，然后由Lottie加載和渲染這個文件并轉(zhuǎn)成相應(yīng)的代碼，由于是JSON文件，文件也會很小，可以減少App包的大小。

(3) 把動畫制作和APP開發(fā)的工作分開，由設(shè)計師來完成動畫的制作

1.2. 模擬器上運行效果：

[[390521]]

2. Lottie使用方法

2.1. 新建工程，增加組件Har包依賴

在應(yīng)用模塊中添加HAR，只需要將lottie.har復(fù)制到entry\libs目錄下即可(由于build.gradle中已經(jīng)依賴的libs目錄下的*.har，因此不需要在做修改)。

2.2. 增加動畫json文件

在resources/rawfile目錄下，放入動畫對應(yīng)的json文件，如bullseye.json.

2.3. 修改主頁面的布局文件

修改主頁面的布局文件ability_main.xml，在Layout標(biāo)簽中增加app命名空間。

然后添加一個com.airbnb.lottie.LottieView組件，設(shè)置LottieView_jsonFile屬性。

全部代碼如下:

 
 
 
 
  
  
  
     
  
  
    
  
  
  
    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">   
  
  
     
  
  
        
  
  
  
        ohos:id="$+id:lottieView"   
  
  
          ohos:height="match_content"   
  
  
          ohos:width="match_content"   
  
  
          app:LottieView_jsonFile = "resources/rawfile/bullseye.json"   
  
  
      />

3. Lottie開發(fā)實現(xiàn)

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)));   
  
  
     
  
  
  // 構(gòu)造compositionLayer   
  
  
  compositionLayer = new CompositionLayer(   
  
  
          null,   
  
  
          LayerParser.parse(lottieComposition),   
  
  
          lottieComposition.getLayers(),   
  
  
          lottieComposition);

其中json文件大致說明如下：

 
 
 
 
  
  
  
  {   
  
  
     
  
  
  "w", // 0 寬度   
  
  
  "h", // 1 高度   
  
  
  "ip", // 2 其實幀   
  
  
  "op", // 3 結(jié)束幀   
  
  
  "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:復(fù)合型，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 時間調(diào)整系數(shù)   
  
  
  "st", // 15 圖層起始幀   
  
  
  "w", // 16 圖層寬度   
  
  
  "h", // 17 圖層高度   
  
  
  "ip", // 18 圖層起始關(guān)鍵幀   
  
  
  "op", // 19 圖層結(jié)束關(guān)鍵幀   
  
  
     
  
  
  }   
  
  
     
  
  
  ]

layers中shapes解析如下：

 
 
 
 
  
  
  
  "shapes": [   
  
  
     
  
  
  {   
  
  
     
  
  
  "ty", //類型(如gr:圖形組, fl:圖形填充, sh:圖形路徑)   
  
  
     
  
  
  "nm",//名稱   
  
  
  "hd", // 是否隱藏   
  
  
  "it" // 圖形的軌跡集合   
  
  
     
  
  
  [{   
  
  
  "ind",//索引   
  
  
  "ks", //動畫關(guān)鍵幀   
  
  
     
  
  
  {   
  
  
     
  
  
  "t",  // startFrame   
  
  
  "s",  // startValue   
  
  
  "e",  // endValue   
  
  
  "o",  // 動畫起始點坐標(biāo)   
  
  
  "i",  // 動畫結(jié)束點坐標(biāo)    
  
  
  "h",  // 插值器類型   
  
  
  "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庫模塊構(gòu)建為HAR包，構(gòu)建HAR包的方法如下：

在Gradle構(gòu)建任務(wù)中，雙擊PackageDebugHar或PackageReleaseHar任務(wù)，構(gòu)建Debug類型或Release類型的HAR。

待構(gòu)建任務(wù)完成后，可以在工程目錄中的loadingview> bulid > outputs > har目錄中，獲取生成的HAR包。

4.項目源碼

見github代碼倉：https://github.com/isoftstone-dev/Lottie_HarmonyOS

更多原創(chuàng)，請關(guān)注"軟通動力HarmonyOS學(xué)院https://harmonyos./column/30