最近有朋友問我下拉然后彈回去的效果是怎么做的，偶然在搶紅包的時候發(fā)現(xiàn)紅包界面有這樣一個功能然后就做了這樣一個效果；

先上一下鏈接：https://vrp8nx.axshare.com大神請繞道。

接下來步驟：

1、先截一張反紅包的截圖，然后上傳到電腦，用axure打開；

2、先插入一個iphone的元件(沒有的自行百度)作為地圖 點擊右鍵排序—置放于最底層；

3、用裁剪工具將圖片裁剪為2部分，姑且稱為下半部分、上半部分；將下方圖片轉(zhuǎn)為動態(tài)面板(如下圖所示)；

4、在動態(tài)面板圖層下，先拖入1個矩形，用吸管工具填充為紅包的紅色，放于剛才圖片裁剪的位置處，寬度和圖片保持一致；

5、在拖入一個矩形，填充為紅包圖片下方的白色，然后將紅包圖片下半部分裁剪掉一部分；

6、接下來進入重點——交互效果：

（1）：首先選中下半部分圖片的動態(tài)面板，點擊拖動時，選擇垂直拖動，加上界限【??注意：此處的邊界主要是防止該面板可以垂直方向無限制地拉動，各位可根據(jù)圖片的大小和坐標(biāo)設(shè)置邊界】

（2）：拖動時設(shè)置后，點擊拖動結(jié)束時，移動選擇為——回到拖動前位置 該步驟主要是當(dāng)鼠標(biāo)拖動結(jié)束時，圖片回到原位置；

以上。

最終的設(shè)計結(jié)構(gòu)和交互如下圖所示，快自己動手試試吧；

如果對你有幫助辛苦點個贊，以后繼續(xù)更新。