代码拉取完成，页面将自动刷新
Lottie是一个适用于OpenHarmony的动画库，它可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画，并在移动设备上进行本地渲染， 可以在各种屏幕尺寸和分辨率上呈现，并且支持动画的交互性，通过添加触摸事件或其他用户交互操作，使动画更加生动和具有响应性。
使用说明：
1.进入页面，点击动画卡片，动画播放并且文本发生变化。
{
"name": "lottieview",
"version": "1.0.0",
"description": "Please describe the basic information.",
"main": "Index.ets",
"author": "",
"license": "Apache-2.0",
"dependencies": {
// Lottie模块
"@ohos/lottie": "2.0.0",
}
}
将Lottie的资源文件data.json文件放置到Entry目录下的common文件夹下(放置本模块中，使用相对路径无法读取)。数据参考politeChicky.json
进入页面，通过Canvas的onReady函数加载动画，点击播放动画，动画执行播放，文本刷新。源码参考LotieView.ets
// 加载动画
loadAnimation(autoplay: boolean) {
if (this.animateItem !== null) {
this.animateItem.destroy();
this.animateItem = null;
}
// TODO:知识点:lottie.loadAnimation将json数据生成动画
this.animateItem = lottie.loadAnimation({
container: this.politeChickyController,
renderer: 'canvas',
loop: false,
autoplay: autoplay,
name: this.politeChicky,
path: this.politeChickyPath,
initialSegment: [FRAME_START, FRAME_END]
})
}
build() {
Stack({ alignContent: Alignment.TopStart }) {
// 动画
Canvas(this.politeChickyController)
.width($r('app.integer.lottie_view_canvas_size'))
.height($r('app.integer.lottie_view_canvas_size'))
.backgroundColor($r('app.color.ohos_id_color_palette2'))
.borderRadius($r('app.string.ohos_id_corner_radius_default_m'))
.onReady(() => {
this.loadAnimation(false);
})
.onClick(() => {
this.loadAnimation(true);
this.times++;
})
// 响应动画的文本
Text(this.textArray[this.times % TEXT_DATA_LENGTH])
.fontSize($r('app.string.ohos_id_text_size_headline'))
.margin($r('app.string.ohos_id_elements_margin_vertical_m'))
.fontColor(Color.White)
}.margin({ top: $r('app.string.ohos_id_elements_margin_vertical_l') })
}
}
不涉及。
lottieview // har类型
|---view
| |---LottieView.ets // 视图层-应用主页面
本实例依赖common模块来实现日志的打印、资源 的调用、动态路由模块来实现页面的动态加载以及Lottie模块，版本为2.0.0。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。