HarmonyOS之第三方 lottie 基本使用

小头鱼

于 2024-07-31 15:09:12 发布

阅读量94

点赞数 2

文章标签： harmonyos

本文链接：https://blog.csdn.net/mm_223/article/details/140823186

版权

添加Lottie库 ohpm install @ohos/lottie
在相应的类中引入组件import lottie from '@ohos/lottie'
构建渲染上下文

  private mainRenderingSettings: RenderingContextSettings = new RenderingContextSettings(true)
  private mainCanvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.mainRenderingSettings)

将Lottie的资源文件data.json文件放置到Entry目录下的common文件夹下(放置本模块中，使用相对路径无法读取)，与pages同级别。
所以json文件路径为：

  private path: string = "common/lottie/data.json"

通过Canvas关联

Canvas(this.mainCanvasRenderingContext).width(40).height(40)
        .onReady(() => {
          this.mainCanvasRenderingContext.imageSmoothingEnabled = true;
          this.mainCanvasRenderingContext.imageSmoothingQuality = 'medium';
          this.animateItem?.resize()
        })

// 加载lottie资源
 loadLottie() {
 //加载前先释放资源
    lottie.destroy(this.animateName)
    this.animateItem = lottie.loadAnimation({
      container: this.mainCanvasRenderingContext,
      renderer: 'canvas',
      loop: true, // 循环
      autoplay: false, // 自动播放
      name: this.animateName, // 动画名称
      contentMode: 'Contain', // 填充模式
      frameRate: 30, // 刷新帧
      path: this.path, // json路径
    })
  }
// 播放
 play() {
	lottie.play()
}
// 释放
 destroyLottie(){
	lottie.destroy(this.animateName)
}