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) 
  } 
}
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.