本文從元件的實現、交互的實現兩個角度，拆解了APP頂部下拉刷新動效制作，并展示了相應的預覽效果。

【頂部下拉刷新】一般應用于內容可變的界面或列表，刷新屬于用戶的主動行為。此教程為最常見的下拉刷新。在設計電商小程序高保真原型規范時，正是應用此動效。

（詳細原型及交互和源文件在下方文章評論中可見）

具體實現方法

第一步：元件的實現

1. 需要準備元件為：

一個矩形作為模態提示，命名為：加載提示；（黑色提示框）

一個圖片元件作為內容，命名為：刷新圖片。

一個圖標和一個文本標簽，作為刷新的文本展示，文案為：下拉刷新。（蘋果模型可忽略）

如下圖所示：（記得調好圖層的順序，其中加載提示為最頂層）

第二步：交互的實現

1.?原理分析：

1）用戶下拉圖片內容時，圖片下移，刷新和圖標顯示，文案為：下拉刷新；

2）用戶拉到一定距離時，刷新文本標簽文本變為：松開刷新；

3）用戶松開圖片內容時，圖片上移一段距離，文本標簽文本變為：正在刷新；并旋轉刷新圖標；

4）圖片繼續上移至初始位置，蓋住圖標和文本標簽。顯示隱藏的“加載提示”矩形。

這樣，面板就可以實現無限循環切換。

2. 交互步驟實現：

選中圖片，添加【載入時】交互事件：

a 添加等待事件1000毫秒；

b 勾選【當前元件】，移動：相對位置，X：0、Y：60；動畫：緩慢退出；時間為：2000毫秒；

c 再添加等待事件2000毫秒；

d 設置【刷新】文本標簽的文本值為：松開刷新；

接下來，則為圖片上移的交互事件：

e 勾選【當前元件】，移動：相對位置，X：0、Y：-20；動畫：緩慢退出；時間為：1000毫秒；

f 添加等待事件1000毫秒；

g 設置【刷新】文本標簽的文本值為：松開刷新；

h 添加旋轉事件，勾選【圖標】，旋轉：相對位置，角度：3600；方向為：順時針；錨點為：中心；動畫為線性，時間為：2000毫秒；

i 再添加等待事件2000毫秒；

最后，為刷新加載成功的模態提示顯示：

j 勾選【當前元件】，移動：相對位置，X：0、Y：-40；動畫：緩慢退出；時間為：1000毫秒；

k 顯示【加載提示】；

L 添加等待事件1500毫秒；

M 設置【刷新】文本標簽的文本值為：下拉刷新；

N 隱藏【加載提示】；

O 添加【觸發事件】，勾選【當前元件】，勾選【載入時】交互事件。

詳細交互如下圖所示：

第三步：效果的預覽

（詳細高保真原型案例、交互和源文件在下方文章評論鏈接可見）

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議