罗湖网站制作,用户体验设计书籍,做网站多少钱保定遨游免费,广州市网站建站【HarmonyOS】鸿蒙应用使用lottie动画
一、lottie动画是什么#xff1f;
https://airbnb.design/lottie
Lottie是由Airbnb团队开发的一个适用于iOS、Android、React Native、Web和Windows的开源动画库#xff0c;用于解析使用Bodymovin导出为JSON的Adobe After Effects动…【HarmonyOS】鸿蒙应用使用lottie动画
一、lottie动画是什么
https://airbnb.design/lottie
Lottie是由Airbnb团队开发的一个适用于iOS、Android、React Native、Web和Windows的开源动画库用于解析使用Bodymovin导出为JSON的Adobe After Effects动画实时渲染AE动画并在设备上呈现它们
Lottie允许应用程序像使用静态图像一样轻松使用动画。目前在鸿蒙平台上也进行了适配鸿蒙lottie动画三方库地址 目前支持以下动画播放和控制API能力
若没有lottie动画资源可以去以下网站下载 lottie动画资源免费网站
二、鸿蒙应用使用lottie动画步骤
1.添加lottie动画依赖库 在模块的oh-package.json5配置中添加一下库版本依赖2.0.14为当前最新版本以动画三方库地址的版本为准 dependencies: {ohos/lottie: 2.0.14}2.将lottie动画JSON文件放到项目文件夹中 建议放置到Entry目录下创建common文件夹下其中创建lottie文件夹存放动画资源。(放置本模块中使用相对路径无法读取)。
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.创建画布容器承载lottieCanvas(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的刷帧率为30loop: 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画布进行清空处理画布清空后再绘制动画。 以上示例代码运行效果如下
