更多内容请访问：鸿蒙科技社区https://harmonyos.51cto.com一、LoadingView组件功能介绍1.1.功能介绍：前言：对于一些简单的动画，我们的开发者可以使用系统提供的一些方法来实现，但是在实际开发中，设计师给出的动画很酷很复杂。面临的问题很多：（1）不同平台的重复开发，（2）开发者和动画设计师之间的沟通问题，（3）复杂动画对应的代码也很复杂，后期维护困难等。Lottie功能介绍：Lottie是Airbnb专门为移动端开发而设计的第三方开源库。其优点如下：（1）跨平台（目前支持Android、iOS、Web、ReactNative等平台）。在HarmonyOS上移植。(2)设计师通过AfterEffects将动画导出为JSON文件，Lottie加载并渲染该文件并转换为相应的代码。由于是JSON文件，文件会比较小，可以减少App包的体积。(3)将动画制作和APP开发的工作分开，让设计师完成动画制作，只需要将lottie.har复制到entry\libs目录下即可（因为build.gradle已经依赖libs目录下的*.har，所以不需要修改）。2.2.在resources/rawfile目录下添加动画json文件，放动画对应的json文件，比如bullseye.json。2.3.修改主页面布局文件修改主页面布局文件ability_main.xml，在Layout标签Namespaces中添加app。然后添加一个com.airbnb.lottie.LottieView组件并设置LottieView_jsonFile属性。整个代码如下：3.Lottie开发实现3.1。新建Module新建Module，类型选择HarmonyOSLibrary，模块名称为lottie，如图：3.2.主类介绍3.3．JSON解析过程介绍//解析json文件，得到InputStreamResourceManagerresourceManager=getContext().getResourceManager();RawFileEntryrawFileEntry=resourceManager.getRawFileEntry(jsonFile);resource=rawFileEntry.openRawFile();//解析json文件，返回lottieCompositionJsonReaderreader=JsonReader.of(buffer(source(resource)));//构造compositionLayercomppositionLayer=newCompositionLayer(null,LayerParser.parse(lottieComposition),lottieComposition.getLayers(),lottieComposition);json文件大致描述如下：{"w",//0width"h",//1height"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":[{"nm",//0name"ind",//1index"refId",//2resourceid"ty",//3layertype(0:compoundtype,1:Solidtype2:图片类型4:Shape类型5:Texttype)parent",//4父层"sw",//5实心宽度"sh",//6实心高度"sc",//7实心颜色"ks",//8包含动画“tt”，//9遮罩类型“masksProperties”，//10遮罩列表“shapes”，//11shape元素“t”包含在层中，//12文本属性“ef”，//13填充效果（Lottiedoes'tsupportlayereffects)"sr",//14时间调整因子"st",//15层起始帧"w",//16层宽度"h",//17层高度"ip",//18层startkeyframe"op",//19layerendkeyframe}]layerslayersshapesinlayers解析如下："shapes":[{"ty",//类型（如gr：图形组，fl：图形填充，sh:图形路径)"nm",//name"hd",//是否隐藏"it"//图形轨迹集合[{"ind",//index"ks",//动画关键帧{"t",//startFrame"s",//startValue"e",//endValue"o",//动画起点坐标"i",//动画终点坐标"h",//插值设备类型"to",//7路径切线1坐标"ti"//8路径切线2坐标}}]}]3.4.播放流程介绍Lottie源码播放调用栈整理如下：()ShapeLayer.drawLayer()ContentGroup.draw()FillContent.draw()或StrokeContent.draw()3.5.主要流程介绍3.6．编译HAR包使用Gradle，可以将HarmonyOSLibrary库模块编译成HAR包。构建HAR包的方法如下：在Gradle构建任务中，双击PackageDebugHar或PackageReleaseHar任务,构建Debug类型或Release类型的HAR。构建任务完成后，可以在项目目录下的loadingview>build>outputs>har目录下获取生成的HAR包。4.项目源码见github代码仓库：https://github.com/isoftstone-dev/Lottie_HarmonyOS更多原创作品请关注“软通动力HarmonyOS学院https://harmonyos.51cto.com/column/30了解更多更多内容请访问：与华为官方共建的Harmonyos技术社区https://harmonyos.51cto.com
