很多APP列表頁(yè)都有一個(gè)效果，滑動(dòng)底部后提示沒有信息后，松手，頁(yè)面自動(dòng)滑動(dòng)隱藏沒有信息的提示。那么這個(gè)效果在Axure里怎么實(shí)現(xiàn)呢？

很多APP列表頁(yè)都有一個(gè)效果，滑動(dòng)底部后提示沒有信息后，松手，頁(yè)面自動(dòng)滑動(dòng)隱藏沒有信息的提示。如果在Axure實(shí)現(xiàn)這個(gè)動(dòng)態(tài)效果內(nèi)，我們開始。

基于上一篇文章 “Axure教程：長(zhǎng)頁(yè)或長(zhǎng)圖滾動(dòng)效果”前面一些相同的步驟我就詳細(xì)展開了。

有問題或失敗時(shí)去詳細(xì)查看，因此可能增加學(xué)習(xí)路徑，對(duì)這篇文章的體驗(yàn)不好，但對(duì)你的學(xué)習(xí)會(huì)有很多幫助，通過(guò)失敗去找原因和解決，會(huì)讓你融會(huì)貫通。

Axure版本：8.0.0.3293。

成品展示：

操作流程一

（1）創(chuàng)建固定區(qū)域動(dòng)態(tài)面板（固定展示區(qū)域高度435）? 易出錯(cuò)誤：固定區(qū)域不要設(shè)置為自動(dòng)調(diào)整。

（2）需要滾動(dòng)的長(zhǎng)頁(yè)（長(zhǎng)圖高度1196）

這里我只截取一小部分，對(duì)比之前文章中的長(zhǎng)圖底部增加一個(gè)提示。

（3）長(zhǎng)頁(yè)轉(zhuǎn)換為動(dòng)態(tài)面板

易出錯(cuò)誤：長(zhǎng)頁(yè)沒有轉(zhuǎn)換為動(dòng)態(tài)面板。（因?yàn)?.0版本圖片、形狀、快照沒有拖動(dòng)時(shí)的用例）

（4）長(zhǎng)頁(yè)的動(dòng)態(tài)面板，放入固定區(qū)域動(dòng)態(tài)面板中的Stat1中

（5）設(shè)置長(zhǎng)圖可移動(dòng)區(qū)域

計(jì)算可移動(dòng)區(qū)間：頂部=435-1197=-762；底部=1197。

為什么這么計(jì)算看上一篇文章，主要時(shí)長(zhǎng)頁(yè)在固定展示區(qū)域內(nèi)被拖動(dòng)時(shí)不至于劃出屏幕。

在固定區(qū)域（動(dòng)態(tài)面板）的Stat1中，為長(zhǎng)頁(yè)（動(dòng)態(tài)面板）設(shè)置拖工時(shí)用例：

• 移動(dòng)為垂直移動(dòng)
• 添加便捷：頂部>=-762,底部<=1197

操作流程二（操作都在固定區(qū)域（動(dòng)態(tài)面板）State1中）

以上就完成了，長(zhǎng)頁(yè)在固定顯示區(qū)域內(nèi)的拖動(dòng)問題，以下內(nèi)容內(nèi)本次文章的重點(diǎn)內(nèi)容。

（1）創(chuàng)建神奇的天際線

創(chuàng)建一個(gè)水平線，放到長(zhǎng)頁(yè)（動(dòng)態(tài)面板）上任意位置。

（2）計(jì)算下，滑到到底部后，如何要自動(dòng)回彈的高度

我這里高度=80

（3）計(jì)算自動(dòng)滑動(dòng)后，長(zhǎng)頁(yè)的絕對(duì)位置（這個(gè)算法有跟多種，我這里只是其中一種）

• x的絕對(duì)值不變，我這里=0
• y的絕對(duì)值=頂部+回彈高度=-762+80=-662

（4）設(shè)置天際線的天花板高度

水平線的X值，不要超過(guò)長(zhǎng)頁(yè)（動(dòng)態(tài)面板）的寬，要在TA的里面；

水平線的y值，就是天花板，-662。

（5）最后的動(dòng)作，回彈動(dòng)畫

為長(zhǎng)頁(yè)（動(dòng)態(tài)面板）設(shè)置拖動(dòng)結(jié)束時(shí)的動(dòng)作，發(fā)起一個(gè)絕對(duì)位置y=-662。(661或660 也可以，否則有時(shí)候會(huì)閃一下)

設(shè)置發(fā)起絕對(duì)位置的觸發(fā)條件：

當(dāng)長(zhǎng)頁(yè)（動(dòng)態(tài)面板），發(fā)展到（接觸）天花板（之前天際線的水平線）時(shí)，就要觸頂反彈了。

OK全部完成，F(xiàn)5試下效果。

完工閑聊

其實(shí)日常原型中，不用做這么復(fù)雜的動(dòng)畫效果，給好說(shuō)明注釋其實(shí)就可以了。

當(dāng)然如何你是為了做效果和Demo展示另當(dāng)別論，不過(guò)RP的展示效果真的很差。

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

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