【HarmonyOS】鸿蒙应用使用lottie动画
【HarmonyOS】鸿蒙应用使用lottie动画一、lottie动画是什么？
https://airbnb.design/lottie
https://i-blog.csdnimg.cn/direct/956d1563fdaf40bf81ef9afeb1d5ffbb.png
Lottie是由Airbnb团队开发的一个实用于iOS、Android、React Native、Web和Windows的开源动画库，用于剖析使用Bodymovin导出为JSON的Adobe After Effects动画，实时渲染AE动画并在设备上出现它们！
Lottie允许应用步伐像使用静态图像一样轻松使用动画。目前在鸿蒙平台上，也进行了适配：鸿蒙lottie动画三方库地址
https://i-blog.csdnimg.cn/direct/c993c0eafa204309ba52b8292512d855.png
目前支持以下动画播放和控制API能力：
https://i-blog.csdnimg.cn/direct/2d26cea534254e5b86a1283ff8d74d58.png
若没有lottie动画资源，可以去以下网站下载：
lottie动画资源免费网站
二、鸿蒙应用使用lottie动画步骤：
1.添加lottie动画依靠库
在模块的oh-package.json5设置中，添加一下库版本依靠：（2.0.14为当前最新版本，以动画三方库地址的版本为准）
"dependencies": {
"@ohos/lottie": "2.0.14"
}
2.将lottie动画JSON文件放到项目文件夹中
建议放置到Entry目录下，创建common文件夹下，其中创建lottie文件夹，存放动画资源。(放置本模块中，使用相对路径无法读取)。
https://i-blog.csdnimg.cn/direct/31bee8dc98d147c3a74285bfcc8e1ca8.png
3.调用lottie动画依靠库
// TODO 1. 引入lottie三方库。
import lottie from '@ohos/lottie';
@Entry
@Component
struct LottiePage {
// 动画资源路径和名字
private mPath: string = "common/lottie/robotYoga.json"
// TODO 相当于key，并非资源配置的名字，可以任意
private mName: string = "test";
// TODO 2. 使用RenderingContext在Canvas组件上进行绘制，声明CanvasRenderingContext2D变量，RenderingContextSettings用来配置CanvasRenderingContext2D对象的参数表明canvas是否开启抗锯齿。
private mRenderingSettings: RenderingContextSettings = new RenderingContextSettings(true);
private mCanvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.mRenderingSettings);
// TODO 6.实现动画播放方法。
lottieController(): void {
lottie.stop();
lottie.play(this.mName);
}
build() {
Column() {
// TODO 4.创建画布容器承载lottie
Canvas(this.mCanvasRenderingContext)
.width(px2vp(1000))
.height(px2vp(1000))
.backgroundColor(Color.Gray)
.onReady(() => {
//抗锯齿的设置
this.mCanvasRenderingContext.imageSmoothingEnabled = true;
this.mCanvasRenderingContext.imageSmoothingQuality = 'medium'
// 加载动画前先销毁之前加载的动画
lottie.destroy(this.mName);
// TODO 5.加载lottie动画
lottie.loadAnimation({
container: this.mCanvasRenderingContext,
renderer: 'canvas',
frameRate: 60, //设置animator的刷帧率为30
loop: true,
autoplay: false,
name: this.mName,
path: this.mPath,
});
})
.onDisAppear(() => {
// 组件移除时，可销毁动画资源
lottie.destroy(this.mName);
})
Text("点击播放动画")
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(()=>{
// TODO 7.在组件事件中调用播放方法
this.lottieController();
})
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
}
}
// TODO 3.定义所需数据类型的接口，初始化变量，接口中需要包含资源路径信息和CanvasRenderingContext2D。
interface TabBarOption {
index: number;
text: ResourceStr;
name: string;
path: string;
canvasRenderingContext: CanvasRenderingContext2D;
}
注意：
(1) canvas设置的宽高比例建议和动画json资源里面的宽高比例一致，如：json动画资源里的宽高比例是 1:2 ，则canvas设置的宽高也是 1:2
(2) 想要的抗锯齿结果：mainCanvasRenderingContext.imageSmoothingEnabled = true 与 mainCanvasRenderingContext.imageSmoothingQuality = ‘medium’
(3) 动画绘制前会对canvas画布进行清空处置惩罚，画布清空后再绘制动画。
以上示例代码，运行结果如下：
https://i-blog.csdnimg.cn/direct/d8276a78ddbf4857aa99708d4b8136e2.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]