下拉刷新组件，对接人日动画，待优化细节

+import lottie, { AnimationItem } from '@ohos/lottie';
 import { PullToRefresh, PullToRefreshConfigurator } from '@ohos/pulltorefresh';
-import {  LazyDataSource } from 'wdKit';
+import { LazyDataSource, Logger } from 'wdKit/Index';
 
 @Component
-export  struct CustomPullToRefresh {
+export struct CustomPullToRefresh {
   @Link alldata: Object[] | LazyDataSource<Object>;
   scroller: Scroller = new Scroller();
   @BuilderParam customList: () => void;
@@ -12,28 +13,238 @@ export  struct CustomPullToRefresh {
   }
   ///是否存在上拉更多
   @Prop @Watch('hasMoreChange') hasMore: boolean = true
-  refreshConfigurator: PullToRefreshConfigurator = new PullToRefreshConfigurator().setHasLoadMore(this.hasMore);
+  refreshConfigurator: PullToRefreshConfigurator = new PullToRefreshConfigurator()
+    .setHasLoadMore(this.hasMore)
+    .setAnimDuration(500);
+  private refreshSettings: RenderingContextSettings = new RenderingContextSettings(true)
+  private refreshContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.refreshSettings)
+  private loadMoreSettings: RenderingContextSettings = new RenderingContextSettings(true)
+  private loadMoreContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.loadMoreSettings)
+  private refreshAnimation: AnimationItem | null = null;
+  private loadMoreAnimation: AnimationItem | null = null;
+  private refreshAnimName: string = "refresh";
+  private refreshingAnimName: string = "refreshing";
+  private loadMoreAnimName: string = "loadMore";
+  private refreshAnimationDestroy = true
+  // refresh-1,refreshing-2,refreshed-3,idle-4
+  @State @Watch('stateChange') private refreshState: number = 4;
+
   build() {
-    Column(){
+    Column() {
       PullToRefresh({
-        data:$alldata,
-        scroller:this.scroller,
-        refreshConfigurator:this.refreshConfigurator,
-        customList:()=>{
-           this.customList();
+        data: $alldata,
+        scroller: this.scroller,
+        refreshConfigurator: this.refreshConfigurator,
+        customList: () => {
+          this.customList();
         },
-        onRefresh:()=>{
-          return new Promise<string>((resolve, reject) => {
-            this.onRefresh(resolve)
+        onRefresh: () => {
+          return new Promise<string>((success, error) => {
+            new Promise<string>((resolve) => {
+              this.onRefresh(resolve)
+            }).then((text) => {
+              setTimeout(()=>{
+                // 延时500，展示第二段动画 TODO 是否去掉？
+                this.refreshState = 3
+                this.refreshDestroy()
+                setTimeout(() => {
+                  success(text)
+                }, 500)
+                setTimeout(() => {
+                  this.refreshState = 4
+                  // 延时将状态改为空闲，组件closeRefresh做了延时，不能配置，这里配合延时
+                }, 1200)
+              },500)
+            })
           });
         },
-        onLoadMore:()=>{
+        onLoadMore: () => {
           return new Promise<string>((resolve, reject) => {
-            this.onLoadMore(resolve)
+            this.onLoadMore(resolve)// TODO 加层promise处理，延长动画时间
           });
         },
-        customLoad: null,
-        customRefresh: null,
+        customLoad: () => {
+          this.customLoadMoreView()
+        },
+        // 可选项，自定义下拉刷新动画布局
+        customRefresh: () => {
+          this.customRefreshView()
+        },
+        // 可选项，下拉中回调
+        onAnimPullDown: (value, width, height) => {
+          this.refreshState = 1
+          // Logger.error('zzzz', 'onAnimPullDown, ' + value + ', ' + width + ', ' + height)
+          this.refreshAnim(value)
+        },
+        // 可选项，刷新中回调
+        onAnimRefreshing: (value, width, height) => {
+          if (this.refreshState < 2) {
+            this.refreshState = 2
+          }
+          // Logger.error('zzzz', 'onAnimRefreshing, ' + value + ', ' + width + ', ' + height)
+          this.refreshingAnim()
+        },
+      })
+    }
+  }
+
+  /**
+   * 销毁所有动画
+   */
+  private refreshDestroy() {
+    lottie.destroy(this.refreshAnimName);
+    lottie.destroy(this.refreshingAnimName);
+    this.refreshAnimation?.removeEventListener('DOMLoaded')
+    this.refreshAnimation?.removeEventListener('destroy')
+    this.refreshAnimation = null
+  }
+
+  @Builder
+  private customRefreshView() {
+    Stack({ alignContent: Alignment.Center }) {
+      Canvas(this.refreshContext)
+        .width(60)
+        .height(60)
+        .backgroundColor(Color.Transparent)
+        .onReady(() => {
+          // 可在此生命回调周期中加载动画，可以保证动画尺寸正确
+          //抗锯齿的设置
+          this.refreshContext.imageSmoothingEnabled = true;
+          this.refreshContext.imageSmoothingQuality = 'medium'
+        })
+        .onDisAppear(() => {
+          lottie.destroy(this.refreshAnimName);
+          lottie.destroy(this.refreshingAnimName);
+        })
+        .visibility((this.refreshState == 1 || this.refreshState == 2) ? Visibility.Visible : Visibility.Hidden)
+
+      Text('已更新至最新')
+        .fontSize(14)
+        .textAlign(TextAlign.Center)
+        .fontColor('#676767')
+        .backgroundColor('#f6f6f6')
+        .borderRadius(20)
+        .padding({
+          left: 19,
+          right: 19,
+          top: 10,
+          bottom: 10
+        })
+        .visibility(this.refreshState == 3 ? Visibility.Visible : Visibility.Hidden)
+    }.padding({ top: 20 })
+  }
+
+  @Builder
+  private customLoadMoreView() {
+    Row() {
+      Canvas(this.loadMoreContext)
+        .width(14)
+        .height(14)
+        .backgroundColor(Color.Transparent)
+        .onReady(() => {
+          // 可在此生命回调周期中加载动画，可以保证动画尺寸正确
+          //抗锯齿的设置
+          this.loadMoreContext.imageSmoothingEnabled = true;
+          this.loadMoreContext.imageSmoothingQuality = 'medium'
+          this.loadMoreAnimate()
+        })
+        .onDisAppear(() => {
+          // Logger.error('zzzz', 'CustomLoadMoreLayout onDisAppear')
+          lottie.destroy(this.loadMoreAnimName);
+        })
+
+      Text('努力加载中')
+        .margin({
+          left: 7,
+          bottom: 1
+        })
+        .fontSize(14)
+        .fontColor('#888888')
+        .textAlign(TextAlign.Center)
+    }
+    .clip(true)
+    .width('100%')
+    .justifyContent(FlexAlign.Center)
+    .height(60)
+  }
+
+  private refreshAnim(percent: number) {
+    if (this.refreshAnimation == null || this.refreshAnimation.name != this.refreshAnimName ||
+    this.refreshAnimationDestroy) {
+      this.refreshAnimation?.destroy(this.refreshAnimName)
+      this.refreshAnimation?.destroy(this.refreshingAnimName)
+      this.refreshAnimation = lottie.loadAnimation({
+        container: this.refreshContext,
+        renderer: 'canvas', // canvas 渲染模式
+        loop: 1,
+        autoplay: true,
+        name: this.refreshAnimName,
+        path: "lottie/refresh_step1.json", // 路径加载动画只支持entry/src/main/ets 文件夹下的相对路径
+      })
+      this.refreshAnimation?.goToAndStop(1)
+      this.addRefreshAnimListener()
+    }
+    this.refreshAnimation?.goToAndStop(this.getFramesByProgress(percent), true);
+  }
+
+  /**
+   * 获取动画帧
+   *
+   * @param percent 百分比，如0.76
+   * @returns
+   */
+  private getFramesByProgress(percent: number): number {
+    if (this.refreshAnimation == null) {
+      return 1;
+    }
+    let total = this.refreshAnimation.totalFrames;
+    let frame = Math.floor(total * percent);
+    if (frame >= total - 1) {
+      frame = total - 1
+    }
+    return frame;
+  }
+
+  private refreshingAnim() {
+    // Logger.error('zzzz', 'animate2, 1')
+    // 先销毁之前的动画
+    if (this.refreshAnimation == null || this.refreshAnimation.name != this.refreshingAnimName ||
+    this.refreshAnimationDestroy) {
+      this.refreshAnimation?.destroy(this.refreshAnimName)
+      this.refreshAnimation?.destroy(this.refreshingAnimName)
+      this.refreshAnimation = lottie.loadAnimation({
+        container: this.refreshContext,
+        renderer: 'canvas', // canvas 渲染模式
+        loop: 10,
+        autoplay: true,
+        name: this.refreshingAnimName,
+        path: "lottie/refresh_step2.json", // 路径加载动画只支持entry/src/main/ets 文件夹下的相对路径
+      })
+      this.addRefreshAnimListener()
+    }
+    // Logger.error('zzzz', 'animate2, 2')
+  }
+
+  private addRefreshAnimListener() {
+    this.refreshAnimation?.addEventListener('DOMLoaded', (args: Object): void => {
+      // Logger.error('zzzz', "lottie DOMLoaded");
+      this.refreshAnimationDestroy = false
+    }); //动画加载完成，播放之前触发
+    this.refreshAnimation?.addEventListener('destroy', (args: Object): void => {
+      // Logger.error('zzzz', "lottie destroy");
+      this.refreshAnimationDestroy = true
+    });
+  }
+
+  loadMoreAnimate() {
+    if (this.loadMoreAnimation == null) {
+      this.loadMoreAnimation = lottie.loadAnimation({
+        container: this.loadMoreContext,
+        renderer: 'canvas', // canvas 渲染模式
+        loop: 50,
+        autoplay: true,
+        name: this.loadMoreAnimName,
+        path: "lottie/loading_more.json", // 路径加载动画只支持entry/src/main/ets 文件夹下的相对路径
       })
     }
   }
@@ -41,4 +252,8 @@ export  struct CustomPullToRefresh {
   hasMoreChange() {
     this.refreshConfigurator.setHasLoadMore(this.hasMore)
   }
+
+  stateChange() {
+    // Logger.error('zzzz', 'stateChange ' + this.refreshState)
+  }
 }
\ No newline at end of file