Axure8 實現移動端頁面上下滑動效果

目前,不少Axure新人都在問如何實現界面上下滑動效果,網上相關的教程也很多,各有各的方法,可是不多有教程對滑動界限設置作出比較詳細的說明,其實在工做過程當中,我的發現練好Axure是頗有意提高逼格的,千萬不要說原型中作複雜的交互效果會浪費時間,不是每一個隊友都能理解你的想象和詮釋,溝通成本更可怕...因此,連熟了Axure,在複雜的效果也只是分分鐘的事....

準備工做:

1.將Rectangle(矩形)拖至畫布,大小設置爲w:326px h:640px,位置(0,0),圓角半徑38

2.在拖一個矩形至畫布,大小設置爲w:320px h:568px 位置(3,39)

此時,一個建議的iPhone 5s屏幕就誕生了

下面步入正題

1.拖入一個Dynamic Panel(動態面板),取名First,大小設置爲w:320px h:568px 位置(3,39),雙擊狀態1

2.在狀態1中繼續添加動態面板,取名second,大小設置爲w:320px h:800px 位置(0,0).

3.在second的狀態1中,添加圖片或者控件等,大小在w;320px h:800之內

4.返回到主頁面(home頁),單擊first動態面板,在交互中雙擊"拖動時"後,進入case1編輯器,選擇移動,勾選second,設置爲垂直移動

此刻,預覽下,會發現已經實現了頁面的上下滑動效果,...可是,這個滑動是停不下來的,這就須要咱們添加判斷界限的條件,下面幾步比較關鍵

5.在主頁面(home頁)拖一個熱區至畫布,取名hot1,大小設置w50,h10,位置(131,44)

接着複製hot1取名hot2,位置(131,585)

..相信你們已經清楚了,這兩個熱區將做爲咱們判斷山下滑動界限的標誌

6.仍是在first的交互中,雙擊"拖動結束時",在case1中,點擊"添加條件"

7.同時,case1的動做按下圖紅框中設置,到如今,就完成了滑動上方界限的限制

 

8.判斷滑動的下方界限就比較麻煩了,須要簡單算算座標,在主頁面(home頁)中在拖一個矩形,大小設置w:320px h:800px (與second區域同樣大小),並移動該控件覆蓋first區域(兩控件底邊重合),彈出來的座標y值就是咱們須要的,記下數值,刪掉矩形

9.在first的交互中,雙擊"拖動結束時",新增case2,點擊"添加條件",並按下圖配置

10,同時,case2的動做按下圖紅框中設置

11.大功告成...預覽吧

效果展現