鸿蒙中通过Lottie加载json动画

原创已于 2025-05-28 09:18:14 修改 · 519 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #鸿蒙 #前端

于 2025-05-28 09:16:13 首次发布

let renderingSettings: RenderingContextSettings = new RenderingContextSettings(true);

let canvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(renderingSettings);

Column() {
//创建画布
  Canvas(canvasRenderingContext).onReady(() => {

    LogUtil.info(TAG + "onReady")

    let content = getLottieFileContent(getContext(), 'mall_wish_loading_icon.json')

    if (StrUtil.isNotEmpty(content)) {

      Lottie.loadAnimation({

        container: canvasRenderingContext,

        renderer: 'canvas', // canvas 渲染模式

        loop: true, //是否循环播放

        autoplay: true, //是否自动播放

        name: LOTTIE_TAG,

        contentMode: 'Contain',

        animationData: JSON.parse(content) //可根据需求切换为网络地址

        uri: http
        ://xxx //网络地址用法

      }).resize()

    } else {

      LogUtil.error(TAG, 'Canvas content is null')

    }

    Lottie.play(LOTTIE_TAG)

  }).width($r('app.float.float_48'))

    .height($r('app.float.float_48'))

    .onDisAppear(() => {

      // 组件移除时，可销毁动画资源

      Lottie.destroy(LOTTIE_TAG);

    })