HarmonyOS 本地lottie动画无法播放

HarmonyOS 本地lottie动画无法播放。

HarmonyOS

FengTianYa

2024-09-12 11:59:52

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

参考官网demo，验证可行：https://gitee.com/openharmony-tpc/lottieArkTS

name应该是唯一的字符串，是用来标识该动画的唯一ID。lottie.play();会播放所有的动画。参考代码：

import lottie, { AnimationItem } from '@ohos/lottie'; 
@Entry 
@Component 
struct Index { 
  @State animationDuration: string = '获取动画时长' 
  @State pauseState: string = '判断当前动画是否正在运行' 
  @State isCanvasVisible: Visibility = Visibility.Visible; 
  private renderingSettings: RenderingContextSettings = new RenderingContextSettings(true) 
  private canvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.renderingSettings) 
  private animateItem2: AnimationItem | null = null; 
  aboutToDisappear(): void { 
    console.info('aboutToDisappear'); 
    lottie.destroy(); 
  } 
  build() { 
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 
      Row({ space: 10 }) { 
        Canvas(this.canvasRenderingContext) 
          .width('45%') 
          .height(200) 
          .backgroundColor(Color.Gray) 
          .onReady(() => { 
            this.animateItem2?.resize(); 
          }) 
          .onDisAppear(() => { 
            lottie.destroy("2016"); 
          }) 
      } 
      Row() { 
        Button('加载2016') 
          .onClick(() => { 
            if (this.animateItem2 == null) { 
              this.animateItem2 = lottie.loadAnimation({ 
                container: this.canvasRenderingContext, 
                renderer: 'canvas', // canvas 渲染模式 
                loop: true, 
                autoplay: true, 
                name: '2016', 
                contentMode: 'Contain', 
                path: "common/lottie/data.json", // 路径加载动画只支持entry/src/main/ets 文件夹下的相对路径 
              }) 
            } 
          }) 
      }.margin({ top: 5 }) 
    } 
    .width('100%') 
    .height('100%') 
  } 
}