HarmonyOS lottie动画？

Question

lottie动画，我想直接显示动画的最后一帧，发现无法实现

我用如下方法实现，但是getDuration获取的时间是NAN

this.animationItem =  lottie.loadAnimation({
  container: this.mainCanvasRenderingContext,
  renderer: 'canvas',
  loop: false,
  autoplay: isAnimate,
  contentMode:'Cover',
  path: path,
})
if (isAnimate) {
  this.animationItem.play()
}else{
  this.animationItem.goToAndStop(this.animationItem.getDuration(false),false)
}

Answer 1

需要在lottie.loadAnimation后才能获取首帧或尾帧。可以设置autoplay为false来禁用动画播放，修改后的示例代码如下：

// xxx.ets

import lottie from '@ohos/lottie'

@Entry
@Component
struct Index {
  private controller: CanvasRenderingContext2D = new CanvasRenderingContext2D()
  private animateName: string = "animate"
  private animatePath: string = "common/lottie/red_heart.json"
  private animateItem: ESObject = null
  @State flag: boolean = true
  @State @Watch('change') getDurationFlag: boolean = false
  @State number: number = 0

  change() {
    console.log(`change方法里的duration: ${this.animateItem.getDuration(false)}`)
  }

  onPageHide(): void {
    console.log('onPageHide')
    lottie.destroy()
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.controller)
        .width('30%')
        .height('20%')
        .backgroundColor('#0D9FFB')
        .onReady(() => {
          console.log('canvas onAppear');
          //初始化
          this.animateItem = lottie.loadAnimation({
            // container: this.controller,
            // renderer: 'canvas',
            // loop: true,
            // autoplay: false,
            // name: this.animateName,
            // path: this.animatePath,
            container: this.controller,
            renderer: 'canvas', // canvas 渲染模式
            loop: true,
            autoplay: false,
            name: '2016',
            contentMode: 'Contain',
            path: "common/lottie/red_heart.json",

          })

          setTimeout(() => {
            this.getDurationFlag = !this.getDurationFlag
            console.log(`定时器启动`)
            console.log(`定时器方法里的duration: ${this.animateItem.getDuration(true)}`)
            this.number = this.animateItem.getDuration(true)
          }, 10)

          //获取尾帧
          // this.animateItem.goToAndStop(this.number, true)
          setTimeout(() => {
            this.animateItem.goToAndStop(this.number, true)
            console.log(`获取尾帧`);
          }, 5000)
        })

      Button('load animation')
        .onClick(() => {
          lottie.destroy('2016')


          this.animateItem = lottie.loadAnimation({
            container: this.controller,
            renderer: 'canvas', // canvas 渲染模式
            loop: true,
            autoplay: this.flag,
            name: '2016',
            contentMode: 'Contain',
            path: "common/lottie/red_heart.json", // 路径加载动画只支持entry/src/main/ets 文件夹下的相对路径
          })
          // 非自动播放时，flag为false时
          if (!this.flag) {

            this.animateItem.play()

          } else {
            //当点击按钮调用loadAnimation时，同一时刻无法获取duration
            console.log(`方法里的duration2: ${this.animateItem.getDuration(false)}`)
            //使用定时器可验证上述问题，建议获取duration和loadAnimation不要同时进行
            // setTimeout(() => {
            //   this.getDurationFlag = !this.getDurationFlag
            //   console.log(`定时器启动`)
            // },5000)

            //使用定时器可验证上述问题，建议获取duration和loadAnimation不要同时进行
            setTimeout(() => {
              this.getDurationFlag = !this.getDurationFlag
              console.log(`定时器启动`)
              console.log(`定时器方法里的duration: ${this.animateItem.getDuration(true)}`)
              this.number = this.animateItem.getDuration(true)
            }, 2000)

          }
        })

      //建议获取总帧数后，再设置首尾帧
      Button('跳转首帧').onClick(() => {
        // this.animateItem.goToAndStop(this.animateItem.getDuration(false), false)
        // this.animateItem.goToAndStop(0.1, false)
        // this.animateItem.goToAndStop(1, true)
        this.animateItem.goToAndStop(1, true)
      })

      Button('跳转尾帧').onClick(() => {
        // this.animateItem.goToAndStop(this.animateItem.getDuration(false), false)
        // this.animateItem.goToAndStop(1, false)
        this.animateItem.goToAndStop(this.number, true)
      })

      Button('play').onClick(() => {
        lottie.play();
      })

      //加载动画并暂停后，可获取播放时长
      Button('pause').onClick(() => {
        lottie.pause();
        this.flag = !this.flag
        console.log(`duration: ${this.animateItem.getDuration(false)}`)
      })

      Button('stop').onClick(() => {
        lottie.stop();

      })

      Button('getDuration').onClick(() => {
        //获取动画单次完整播放的时
        console.log(`duration: ${this.animateItem.getDuration(false)}`)
      })

      Button('destroy animation')
        .onClick(() => {
          lottie.destroy(this.animateName)
          this.animateItem = null
        })
    }
    .width('100%')
    .height('100%')
  }
}