本文從元件的實(shí)現(xiàn)、交互的實(shí)現(xiàn)兩個角度，拆解了APP頂部下拉刷新動效制作，并展示了相應(yīng)的預(yù)覽效果。

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

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

具體實(shí)現(xiàn)方法

第一步：元件的實(shí)現(xiàn)

1. 需要準(zhǔn)備元件為：

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

一個圖片元件作為內(nèi)容，命名為：刷新圖片。

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

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

第二步：交互的實(shí)現(xiàn)

1.?原理分析：

1）用戶下拉圖片內(nèi)容時，圖片下移，刷新和圖標(biāo)顯示，文案為：下拉刷新；

2）用戶拉到一定距離時，刷新文本標(biāo)簽文本變?yōu)椋核砷_刷新；

3）用戶松開圖片內(nèi)容時，圖片上移一段距離，文本標(biāo)簽文本變?yōu)椋赫谒⑿拢徊⑿D(zhuǎn)刷新圖標(biāo)；

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

這樣，面板就可以實(shí)現(xiàn)無限循環(huán)切換。

2. 交互步驟實(shí)現(xiàn)：

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

a 添加等待事件1000毫秒；

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

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

d 設(shè)置【刷新】文本標(biāo)簽的文本值為：松開刷新；

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

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

f 添加等待事件1000毫秒；

g 設(shè)置【刷新】文本標(biāo)簽的文本值為：松開刷新；

h 添加旋轉(zhuǎn)事件，勾選【圖標(biāo)】，旋轉(zhuǎn)：相對位置，角度：3600；方向?yàn)椋喉槙r針；錨點(diǎn)為：中心；動畫為線性，時間為：2000毫秒；

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

最后，為刷新加載成功的模態(tài)提示顯示：

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

k 顯示【加載提示】；

L 添加等待事件1500毫秒；

M 設(shè)置【刷新】文本標(biāo)簽的文本值為：下拉刷新；

N 隱藏【加載提示】；

O 添加【觸發(fā)事件】，勾選【當(dāng)前元件】，勾選【載入時】交互事件。

詳細(xì)交互如下圖所示：

第三步：效果的預(yù)覽

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

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

本文由 @火星人～艾斯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議