HarmonyOS 鸿蒙Next 下拉刷新动画实战

HarmonyOS 鸿蒙Next 下拉刷新动画实战

介绍

本示例实现了界面下拉刷新动画显示功能，常见APP下拉界面即可完成动画刷新效果。

下拉刷新动画案例源码链接

效果图

使用说明

下拉界面，动画刷新效果即会显现，如效果图所示。

实现思路

点击跳转系统相机应用

1. List({ space: 10 })：创建一个列表组件；列表元素生成：LazyForEach(this.list, (item: PostCardData, index: number) => {...})：使用 LazyForEach 方法遍历 this.list 数组，对于数组中的每个元素 item，创建一个 ListItem 组件。在 ListItem 中，创建一个 PostCard 组件，并将当前元素 item 作为 data 属性传递给它。同时，为 PostCard 组件定义了一个 onDelete 回调函数，当该函数被触发时，会调用 this.list.deleteData(index) 从 this.list 数组中删除当前元素。

    List({ space: 10 }) {
      LazyForEach(this.list, (item: PostCardData, index: number) => {
        ListItem() {
          PostCard({
            data: item, onDelete: () => {
              this.list.deleteData(index);
            }
          })
        }
      })
  <span class="hljs-title">ListItem</span><span class="hljs-params">()</span> {
    <span class="hljs-title">this</span>.<span class="hljs-title">loadMoreUI</span><span class="hljs-params">()</span>
  }.<span class="hljs-title">visibility</span><span class="hljs-params">(<span class="hljs-keyword">this</span>.isLoading || <span class="hljs-keyword">this</span>.isRetry ? Visibility.Visible : Visibility.None)</span>
}

1. Refresh：创建一个Refresh组件，其中refreshing属性与$$this.isLoading绑定，builder属性使用this.customRefreshUI() 函数生成的内容。当刷新操作发生时，会根据 $$this.isLoading 的状态显示相应的刷新UI元素，而具体的刷新UI元素由this.customRefreshUI()函数来创建。

    Refresh({ refreshing: $$this.isLoading, builder: this.customRefreshUI() }) {
    Column({ space: 10 }) {
        Banner()
        ButtonGroup()
        Text('推荐阅读').fontSize(12).fontColor(Color.Grey).width('100%').height(20)
        ContentList()
    }
    }.onStateChange((state: RefreshStatus) => {
    if (state === RefreshStatus.Refresh) {
        this.isLoading = true;
    }
    })

1. 使用[@Builder](/user/Builder)装饰器定义一个名为customRefreshUI的函数。

  @Builder
  customRefreshUI() {
    RefreshText({ isLoading: this.isLoading })
  }

1. RefreshText构建：animate方法，当isLoading为true时，会调用animateTo方法执行动画。

• duration: 2000：动画时长为 2000 毫秒。

• finishCallbackType: FinishCallbackType.LOGICALLY：完成回调类型为逻辑类型。

• curve: Curve.Linear：动画曲线为线性。

• iterations: -1：动画将无限次迭代。

• onFinish回调函数：当动画完成时将value重置为 0。

  第二个参数函数：在动画执行过程中更新value为 1。

export struct RefreshText {
  [@Link](/user/Link) [@Watch](/user/Watch)('animate') isLoading: boolean;
  [@State](/user/State) value: number = 0;
animate() {
if (this.isLoading) {
hilog.info(0x0000, ‘testTag’, <span class="javascript"><span class="hljs-keyword">do</span> animate</span>);
animateTo({
duration: 2000,
finishCallbackType: FinishCallbackType.LOGICALLY,
curve: Curve.Linear,
iterations: -1,
onFinish: () => {
this.value = 0
}
}, () => {
this.value = 1
})
}
}
build() {
Stack() {
···
}
}
}

工程目录

entry/src/main/ets/
|---pages
|   |---Index.ets                          // 首页
ground/src/main/ets/
|---components
|   |---ButtonGroupTop.ets               // 圈子按钮组件
|   |---DialogFeedback.ets                // 反馈弹窗
|   |---FAB.ets
|   |---PostCard.ets                      // 海报卡片
|   |---RefreshText.ets                   // 下拉刷新显示文本
|---constant
|   |---ButtonListInstances.ets                          // 圈子按钮列表定义
|---model
|   |---ViewModels.ets                          // 数据模型定义
|---views
|   |---Banner.ets                         // 轮播组件
|   |---ButtonGroup.ets                   // 按钮集合组件
|   |---ContentList.ets                   // 评论列表组件
|   |---Ground.ets                         // 背景组件
|   |---Search.ets                         // 搜索框组件