鸿蒙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文件路径})})}}}