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) => {
        },
      })
    }
  }
}
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.