目前,很多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.大功告成...預覽吧