HarmonyOS 如何实现一下lottie结合下拉刷新的动画

参考demo：

import lottie, { AnimationItem } from '@ohos/lottie'
import web_webview from '@ohos.web.webview';
import { PullToRefresh } from '@ohos/pulltorefresh'

@Entry
@ComponentV2
struct Index {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @Local dataArray: Array<string> = []
  private scroller: Scroller = new Scroller();
  private mainRenderingSettings: RenderingContextSettings = new RenderingContextSettings(true)
  private mainCanvasRenderingContext: CanvasRenderingContext2D =
    new CanvasRenderingContext2D(this.mainRenderingSettings)
  private animateItem: AnimationItem | null = null;
  private animateName: string = "grunt";
  private tag1: boolean = true;

  @Builder
  getContentView() {
    Column() {
      Web({ src: 'xxx', controller: this.controller })
    }.width('100%').height('100%')
  }

  @Builder
  private customRefreshView() {
    Canvas(this.mainCanvasRenderingContext)
      .width('100%')
      .height('100%')
      .backgroundColor(Color.Gray)
      .onReady(() => {
        //抗锯齿的设置
        this.mainCanvasRenderingContext.imageSmoothingEnabled = true;
        this.mainCanvasRenderingContext.imageSmoothingQuality = 'medium'
        if (this.animateItem == null) {
          this.animateItem = lottie.loadAnimation({
            container: this.mainCanvasRenderingContext,
            renderer: 'canvas', // canvas 渲染模式
            loop: true,
            autoplay: false,
            name: this.animateName,
            frameRate: 60,
            contentMode: 'Contain',
            path: "lottie/red_heart.json", // 路径加载动画只支持entry/src/main/ets 文件夹下的相对路径
          })
        } else {
          this.animateItem.resize();
        }
      })
      .onDisAppear(() => {
        lottie.destroy(this.animateName)
        this.animateItem = null
      })
  }

  build() {
    Scroll(this.scroller) {
      PullToRefresh({
        // 必传项，列表组件所绑定的数据
        data: this.dataArray,
        // 必传项，需绑定传入主体布局内的列表或宫格组件
        scroller: this.scroller,
        // 必传项，自定义主体布局，内部有列表或宫格组件
        customList: () => {
          // 一个用@Builder修饰过的UI方法
          this.getContentView();
        },
        // 可选项，下拉刷新回调
        onRefresh: () => {
          return new Promise<string>((resolve, reject) => {
            // 模拟网络请求操作，请求网络2秒后得到数据，通知组件，变更列表数据
            setTimeout(() => {
              this.animateItem?.pause()
              this.tag1 = true;
              resolve('刷新成功');
            }, 2000);
          });
        },
        // 可选项，自定义下拉刷新动画布局
        customRefresh: () => {
          this.customRefreshView();
        },
        // 可选项，下拉中回调
        onAnimPullDown: (value, width, height) => {
          if (this.tag1) {
            this.animateItem?.play()
            this.tag1 = false
          }
        },
        // 可选项，刷新中回调
        onAnimRefreshing: (value, width, height) => {
        },
      })
    }
  }
}