【背景知识】

• Refresh组件是可以进行页面下拉操作并显示刷新动效的容器组件，它可以采用animateTo显式动画来自定义动画效果。
• Lottie是一个适用于OpenHarmony的动画库，它可以解析json格式的动画，并在移动设备上进行本地渲染，以此来实现动画的播放、暂停等操作。

【解决方案】

方案一：使用Refresh组件自身属性实现，可以参考官网Refresh实现下拉刷新动画示例一。

方案二：使用Refresh组件结合Lottie实现。具体步骤如下：

1. 引入必要的组件和配置：首先，确保项目中已经引入了Lottie动画库。在项目地址中打开终端，输入以下命令安装组件：

   ohpm install [@ohos](/user/ohos)/lottie
   

2. 引入lottie.json自定义动画文件：json动画文件可以参考json动画文件，在resources/rawfile文件夹下放入动画文件即可，例如在rawfile文件夹下创建common/lottie/animation.json动画文件。

3. 加载并配置Lottie动画：使用Lottie来配置下拉时的动画效果。例如：

   loadPullDownAnimation() {
     this.animateItem = lottie.loadAnimation({
       container: this.context, // 渲染上下文
       renderer: 'canvas', // canvas渲染模式
       loop: 10, // 是否循环播放,默认true
       autoplay: true, // 是否自动播放，默认true
       name: this.animateName,
       contentMode: 'Contain',
       path: 'common/lottie/animation.json', // json路径
     })
   }
   

4. 在Refresh组件中使用onStateChange和onRefreshing等事件来配置下拉时不同状态下的动画效果。完整示例代码如下：

   import lottie, { AnimationItem } from '[@ohos](/user/ohos)/lottie'
   
   [@Entry](/user/Entry)
   [@Component](/user/Component)
   struct RefreshExample {
     @State isRefreshing: boolean = false
     @State arr: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
     private mainCanvasRenderingContext: CanvasRenderingContext2D = new CanvasRenderingContext2D()
     private animateItem: AnimationItem | null = null
     private animateName: string = 'pullDownAnimate'
     private setting: RenderingContextSettings = new RenderingContextSettings(true);
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.setting);
     private lottieName: string = 'lottie_data';
   
     loadPullDownAnimation() {
       this.animateItem = lottie.loadAnimation({
         container: this.context, // 渲染上下文
         renderer: 'canvas', // canvas渲染模式
         loop: 10, // 是否循环播放,默认true
         autoplay: true, // 是否自动播放，默认true
         name: this.animateName,
         contentMode: 'Contain',
         path: 'common/lottie/animation.json', // json路径
       })
     }
   
     @Builder
     customRefreshComponent() {
       Stack() {
         Row() {
           Canvas(this.context)
             .width('50%')
             .backgroundColor('#aabbcc')
             .onDisAppear(() => {
               lottie.destroy(this.lottieName) // Canvas销毁时顺带销毁lottie动画
             })
             .onReady(() => {
               if (this.mainCanvasRenderingContext) {
                 this.mainCanvasRenderingContext.imageSmoothingEnabled = true;
                 this.mainCanvasRenderingContext.imageSmoothingQuality = 'medium';
                 this.loadPullDownAnimation();
               } else {
                 console.error('mainCanvasRenderingContext is not initialized');
               }
             })
         }
         .alignItems(VerticalAlign.Center)
       }
       .align(Alignment.Center)
       .clip(true)
       // 设置最小高度约束保证自定义组件高度随刷新区域高度变化时自定义组件高度不会低于minHeight
       .constraintSize({ minHeight: 32 })
       .width('100%')
     }
   
     build() {
       Column() {
         Refresh({ refreshing: $$this.isRefreshing, builder: this.customRefreshComponent() }) {
           List() {
             ForEach(this.arr, (item: string) => {
               ListItem() {
                 Text('' + item)
                   .width('70%')
                   .height(80)
                   .fontSize(16)
                   .margin(10)
                   .textAlign(TextAlign.Center)
                   .borderRadius(10)
                   .backgroundColor(0xFFFFFF)
               }
             }, (item: string) => item)
           }
           .onScrollIndex((first: number) => {
             console.info(first.toString())
           })
           .width('100%')
           .height('100%')
           .alignListItem(ListItemAlign.Center)
           .scrollBar(BarState.Off)
         }
         .backgroundColor(0x89CFF0)
         .pullToRefresh(true)
         .refreshOffset(64)
         .onStateChange((refreshStatus: RefreshStatus) => {
           console.info(`Refresh onStatueChange state is ${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(() => {
           setTimeout(() => {
             this.isRefreshing = false
           }, 2000)
           console.info(`onRefreshing test`)
         })
       }
     }
   }
   

【总结】

方案一、二都是通过Refresh组件实现下拉刷新动画，但实现方法略有不同，区别如下表格：

常见场景如下：

• 工具类应用或功能型应用，如手机的电话簿。
• 社交媒体应用或视频播放应用，如抖音。