HarmonyOS 鸿蒙Next开发案例 | 自定义下拉刷新动画

HarmonyOS 鸿蒙Next开发案例 | 自定义下拉刷新动画 场景介绍

应用开发过程中常用可滑动组件下拉的方式触发内容刷新。为了丰富下拉刷新样式，我们可以通过设置属性动画中的动画时长、动画速率和播放模式等相关属性来完成。本文即为大家介绍如何开发这类自定义下拉刷新动画。

效果呈现

本例效果图如下：

运行环境

本例基于以下环境开发，开发者也可以基于其他适配的版本进行开发：

• IDE: DevEco Studio 3.1.1 Release
• SDK: 3.1.0(API 9)

实现思路

• 向下滑动可滑动组件达到一定值后启动动画效果：通过监听刷新组件state状态的变化，检查onStateCheck()当前状态为正在刷新状态，启动动画。
• 在动画效果持续一定时间后动画效果结束，可滑动组件刷新回调：通过监听刷新组件state状态的变化，改变onStateChange()当前状态为刷新完毕状态，可滑动组件向上滑动，刷新回调。
• 默认组件的刷新：头部样式的刷新是根据RefreshState变化的；刷新部件可多样式、可根据具体业务需求，本例为默认的image组件样式。
• 主页的布局框架：通过Stack组件进行堆叠，并且通过Tab组件管理刷新部件样式。

开发步骤

1. 自定义动画刷新：本例中自定义动画刷新是由五个图片的动画效果组合而成的，监听RefreshComponent刷新组件state状态的变化，当前状态为REFRESHING状态时，启动动画效果，每个Image通过iconItem参数分别设置各自的x轴偏移量和延时播放的属性动画效果。

2. 刷新默认组件：通过onStateCheck确认当前刷新状态，从而明确刷新标题。

3. 下拉刷新组件：通过onTouch事件中TouchType的类型改变RefreshState状态，然后通过onStateChanged方法触发引入onRefresh事件。根据标题样式进行渲染，当标题样式为DEFAULT时，调用默认组件刷新；当标题样式为CLOUD时，调用自定义动画刷新。

4. 文件管理Tab页和Tab管理页：通过Stack组件完成UI框架。

5. 屏幕适配工具类

6. 刷新常量类