01
LoadingView 组件功能介绍
①功能介绍
对于一些简单的动画我们开发者可以使用系统提供的一些方法来实现，但是在实际开发中，设计师给出的动画都是很炫酷复杂的。
如果采用手写代码的方式，就要面对很多问题：
如不同平台要重复开发
开发者和动画设计师之间的沟通问题，
复杂动画对应的代码也非常复杂，后期维护困难等
Lottie 功能介绍：Lottie 是 Airbnb 专门为移动开发设计的一个第三方开源库。
他的优点如下：
跨平台（目前支持 Android、iOS 、Web、React Native 等平台），本组件完成了 Lottie 再 HarmonyOS 上的移植。
设计师通过 After Effects 将动画导出 JSON 文件，然后由 Lottie 加载和渲染这个文件并转成相应的代码，由于是 JSON 文件，文件也会很小，可以减少 App 包的大小。
把动画制作和 APP 开发的工作分开，由设计师来完成动画的制作。
②效果
02
Lottie 使用方法
①新建工程，增加组件 Har 包依赖
在应用模块中添加 HAR，只需要将 lottie.har 复制到 entry\libs 目录下即可（由于 build.gradle 中已经依赖的 libs 目录下的 *.har，因此不需要在做修改）。
②增加动画 json 文件
在 resources/rawfile 目录下，放入动画对应的 json 文件，如 bullseye.json。
③修改主页面的布局文件
修改主页面的布局文件 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>
03
Lottie 开发实现
①新建一个 Module
②主要类介绍
如下图：
③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);
{
"w", // 0 宽度
"h", // 1 高度
"ip", // 2 其实帧
"op", // 3 结束帧
"fr", // 4 帧率
"v", // 5 版本号
"layers", // 6 图层列表
"assets", // 7 图片资源列表
"fonts", // 8 字体列表
"chars", // 9 字体具体样式
"markers" // 10 遮盖层列表
}
"assets": [
{
"id", // 0 图片id
"w", // 2 宽度
"h", // 3 高度
"p", // 4 图片名称
"u" // 5 图片路径
}
]
"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 图层结束关键帧
}
]
"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坐标
}
}]
}
]
④播放流程介绍
LottieDrawable.draw()
drawInternal()
drawWithOriginalAspectRatio()
baseLayer.draw()
compositionLayer.drawLayer()
baseLayer.draw()
compositionLayer.drawLayer()
baseLayer.draw()
ShapeLayer.drawLayer()
ContentGroup.draw()
FillContent.draw() or StrokeContent.draw()
⑤主流程介绍
⑥编译 HAR 包
利用 Gradle 可以将 HarmonyOS Library 库模块构建为 HAR 包。
构建 HAR 包的方法如下：在 Gradle 构建任务中，双击 PackageDebugHar 或 PackageReleaseHar 任务，构建 Debug 类型或 Release 类型的 HAR。
待构建任务完成后，可以在工程目录中的 loadingview→bulid→outputs→har 目录中，获取生成的 HAR 包。
04
项目源码
https://github.com/isoftstone-dev/Lottie_HarmonyOS
https://harmonyos.51cto.com/column/30
👇点击关注鸿蒙技术社区👇
专注开源技术，共建鸿蒙生态
点“阅读原文”了解更多
