HarmonyOS lottie动画

需要在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%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.