HarmonyOS三方件开发指南(15)-LoadingView功能介绍

[[390520]]

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://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. 模拟器上运行效果：

[[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属性。

全部代码如下:

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.   
  
  
  
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    4.   
  
  
  
  4.     xmlns:app="http://schemas.huawei.com/apk/res/ohos" 
    5.   
  
  
  
  5.     ohos:height="match_parent" 
    6.   
  
  
  
  6.     ohos:width="match_parent" 
    7.   
  
  
  
  7.     ohos:orientation="vertical"> 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.       
  
  
  
  10.         ohos:id="$+id:lottieView" 
    11.   
  
  
  
  11.         ohos:height="match_content" 
    12.   
  
  
  
  12.         ohos:width="match_content" 
    13.   
  
  
  
  13.         app:LottieView_jsonFile = "resources/rawfile/bullseye.json" 
    14.   
  
  
  
  14.     /> 
    15.   
  
  
  
  15.  
    16.

3. Lottie开发实现

3.1. 新建一个Module

新建一个Module，类型选择HarmonyOS Library，模块名为lottie，如图：

3.2. 主要类介绍

3.3. JSON解析流程介绍

 
 
 
 
    
  
  
  
  
  1. // 解析json文件，获取InputStream 
    2.   
  
  
  
  2. ResourceManager resourceManager = getContext().getResourceManager(); 
    3.   
  
  
  
  3. RawFileEntry rawFileEntry = resourceManager.getRawFileEntry(jsonFile); 
    4.   
  
  
  
  4. resource = rawFileEntry.openRawFile(); 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. // 解析json文件,返回lottieComposition 
    7.   
  
  
  
  7. JsonReader reader = JsonReader.of(buffer(source(resource))); 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. // 构造compositionLayer 
    10.   
  
  
  
  10. compositionLayer = new CompositionLayer( 
    11.   
  
  
  
  11.         null, 
    12.   
  
  
  
  12.         LayerParser.parse(lottieComposition), 
    13.   
  
  
  
  13.         lottieComposition.getLayers(), 
    14.   
  
  
  
  14.         lottieComposition); 
    15.

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

 
 
 
 
    
  
  
  
  
  1. { 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. "w", // 0 宽度 
    4.   
  
  
  
  4. "h", // 1 高度 
    5.   
  
  
  
  5. "ip", // 2 其实帧 
    6.   
  
  
  
  6. "op", // 3 结束帧 
    7.   
  
  
  
  7. "fr", // 4 帧率 
    8.   
  
  
  
  8. "v", // 5 版本号 
    9.   
  
  
  
  9. "layers", // 6 图层列表 
    10.   
  
  
  
  10. "assets", // 7 图片资源列表 
    11.   
  
  
  
  11. "fonts", // 8 字体列表 
    12.   
  
  
  
  12. "chars", // 9 字体具体样式 
    13.   
  
  
  
  13. "markers" // 10 遮盖层列表 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. } 
    16.

其中assets图片资源说明如下：

 
 
 
 
    
  
  
  
  
  1. "assets": [ 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. { 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. "id", // 0 图片id 
    6.   
  
  
  
  6. "w", // 2 宽度 
    7.   
  
  
  
  7. "h", // 3 高度 
    8.   
  
  
  
  8. "p", // 4 图片名称 
    9.   
  
  
  
  9. "u" // 5 图片路径 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. } 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. ] 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. layers说明如下： 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17. "layers": [ 
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19. { 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21. "nm", // 0 名称 
    22.   
  
  
  
  22. "ind", // 1 索引 
    23.   
  
  
  
  23. "refId", // 2 指向的资源id 
    24.   
  
  
  
  24. "ty", // 3 图层类型(0:复合型，1: Solid类型 2:图片类型 4:Shape类型 5:Text类型) 
    25.   
  
  
  
  25.  
    26.   
  
  
  
  26. parent", // 4 父图层 
    27.   
  
  
  
  27. "sw", // 5 Solid宽度 
    28.   
  
  
  
  28. "sh", // 6 Solid高度 
    29.   
  
  
  
  29. "sc", // 7 Solid颜色 
    30.   
  
  
  
  30. "ks", // 8 包含的动画 
    31.   
  
  
  
  31. "tt", // 9 遮盖类型 
    32.   
  
  
  
  32. "masksProperties", // 10 遮盖列表 
    33.   
  
  
  
  33. "shapes", // 11 图层包含的形状元素 
    34.   
  
  
  
  34. "t", // 12 文本属性 
    35.   
  
  
  
  35. "ef", // 13 填充效果(Lottie doesn't support layer effects) 
    36.   
  
  
  
  36. "sr", // 14 时间调整系数 
    37.   
  
  
  
  37. "st", // 15 图层起始帧 
    38.   
  
  
  
  38. "w", // 16 图层宽度 
    39.   
  
  
  
  39. "h", // 17 图层高度 
    40.   
  
  
  
  40. "ip", // 18 图层起始关键帧 
    41.   
  
  
  
  41. "op", // 19 图层结束关键帧 
    42.   
  
  
  
  42.  
    43.   
  
  
  
  43. } 
    44.   
  
  
  
  44.  
    45.   
  
  
  
  45. ] 
    46.

layers中shapes解析如下：

 
 
 
 
    
  
  
  
  
  1. "shapes": [ 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. { 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. "ty", //类型(如gr:图形组, fl:图形填充, sh:图形路径) 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. "nm",//名称 
    8.   
  
  
  
  8. "hd", // 是否隐藏 
    9.   
  
  
  
  9. "it" // 图形的轨迹集合 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. [{ 
    12.   
  
  
  
  12. "ind",//索引 
    13.   
  
  
  
  13. "ks", //动画关键帧 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. { 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17. "t",  // startFrame 
    18.   
  
  
  
  18. "s",  // startValue 
    19.   
  
  
  
  19. "e",  // endValue 
    20.   
  
  
  
  20. "o",  // 动画起始点坐标 
    21.   
  
  
  
  21. "i",  // 动画结束点坐标  
    22.   
  
  
  
  22. "h",  // 插值器类型 
    23.   
  
  
  
  23. "to", // 7 路径切线1坐标 
    24.   
  
  
  
  24. "ti"  // 8 路径切线2坐标 
    25.   
  
  
  
  25.  
    26.   
  
  
  
  26. } 
    27.   
  
  
  
  27.  
    28.   
  
  
  
  28. }] 
    29.   
  
  
  
  29.  
    30.   
  
  
  
  30. } 
    31.   
  
  
  
  31.  
    32.   
  
  
  
  32. ] 
    33.

3.4. 播放流程介绍

Lottie源码播放调用栈梳理如下：

 
 
 
 
    
  
  
  
  
  1. LottieDrawable.draw() 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. drawInternal() 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. drawWithOriginalAspectRatio() 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. baseLayer.draw() 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. compositionLayer.drawLayer() 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. baseLayer.draw() 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. compositionLayer.drawLayer() 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. baseLayer.draw() 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17. ShapeLayer.drawLayer() 
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19. ContentGroup.draw() 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21. FillContent.draw() or StrokeContent.draw()   
    22.

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./column/30

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos.

 

当前文章：HarmonyOS三方件开发指南(15)-LoadingView功能介绍
文章路径：http://www.shufengxianlan.com/qtweb/news7/430607.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

虚拟主机知识

同城分类信息

宜宾做网站　　 　重庆网络营销　　 　成都全屋定制　　 　重庆网站建设　　 　艾名斯智能　　 　一带一路　　 　攀枝花网站建设　　 　雨棚定制　　 　成都户外广告牌设计　　 　内江智速网站建设　　 　安卓开发　　 　腾讯云香港免备案空间　　 　成都圣月服饰　　 　成都响应式网站建设　　 　温江电信机房　　 　广安搬家公司　　 　南充机房托管　　 　成都外贸网站建设公司　　 　做网站　　 　成都定制网站开发