HarmonyOS 在Refresh组件中显示Lottie动画？

Question

我这里在使用Refresh组件，builder传入了一个Lottie动画，下拉刷新后不展示动画，断点发现一直在走aboutToDisappear方法，按照规则，不展示的时候要销毁lottie动画，所以我在aboutToDisappear中销毁了动画，现在的问题是，这里要怎么做才能正常在Refresh组件中显示Lottie动画？

Answer 1

可参考此demo，实现Refresh中加载使用lottie动画：

import lottie, { AnimationItem } from '@ohos/lottie'

@Entry
@Component
export default struct RefreshTest {
  @State isRefreshing: boolean = false
  // 下拉刷新
  private mainCanvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D()
  private pullDownJsonPath: string = 'common/lottie/loading.json'
  private animateItem: AnimationItem | null = null
  private animateName: string = "pullDownAnimate"

  loadPullDownAnimation() {
    if (!this.animateItem) {
      this.animateItem = lottie.loadAnimation({
        container: this.mainCanvasRenderingContext, // 渲染上下文
        renderer: 'canvas', // 渲染方式
        loop: true, // 是否循环播放,默认true
        autoplay: false, // 是否自动播放，默认true
        name: this.animateName,
        path: this.pullDownJsonPath, // json路径
      })
    }
  }

  @Builder
  customPullRefresh() {
    Column() {
      Canvas(this.mainCanvasRenderingContext)
        .size({ width: 60, height: 60 })
        .onReady(() => {
          // this.loadPullDownAnimation()
        })
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Refresh({
        refreshing: $$this.isRefreshing,
        offset: 0,
        friction: 64,
        builder: this.customPullRefresh()
      }) {
        Row() {
          Text('sssssssssssssssssss')
        }.height(1000).border({ color: Color.Black, width: 5 })
      }
      .onStateChange((refreshStatus: RefreshStatus) => {
        console.info('TEST== refreshStatus: ' + refreshStatus)
        if (refreshStatus == 0) { // 未下拉
          this.animateItem!.destroy()
          this.animateItem = null
        }
        if (refreshStatus == 1) { // 下拉中
          this.loadPullDownAnimation()
        }
        if (refreshStatus == 3) { // 刷新中
          this.animateItem?.play();
        }
        if (refreshStatus == 4) { // 刷新结束
          setTimeout(() => {
            this.animateItem!.destroy()
            this.animateItem = null
          }, 75)
        }
      })
      .onRefreshing(() => {
        // this.loadPullDownAnimation()
        setTimeout(() => {
          this.isRefreshing = false
          // this.animateItem!.destroy()
          // this.animateItem = null
        }, 2000)

        console.log('onRefreshing test')
      })
    }
    .width('100%')
    .height(1000).backgroundColor(Color.Pink)
  }
}