鸿蒙app开发中 拿到json文件数据进行动画的播放

1.效果 类似于这样的 播放动画

2.实现步骤 使用lottie 组件。将 json 文件按照官方文档的步骤进行 放入 就能进行播放了

官网的地址

详细的代码。直接封装成一个组件 ----- 按照组件使用的方式就行

// 播放的动画
@Component
export struct radioPlayAnimation{
  // 构建上下文
  private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true)
  private canvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings)
  private animateItem: AnimationItem | null = null;


  build() {
    Row(){
      Canvas(this.canvasRenderingContext)
        .width(14)
        .height(14)
        .onReady(() => {
          this.animateItem = lottie.loadAnimation({
            container: this.canvasRenderingContext, // 绑定画布
            renderer: 'canvas',
            loop: true, // 循环播放
            autoplay: true, // 自动播放
            // name: this.animateName,
            path: 'common/radio_play.json' // JSON文件路径
          })
        })
    }
  }

}