0. 鼠標拖動元件到編輯區,(了解如何下載使用ios元件庫的請參考這篇文章:Axure 如何使用 ios相關元件庫)
1. 在左側元件庫中找到“動態面板”,如果找不到“元件庫”,請在視圖---功能區中勾選元件庫前面的復選框。
2.拖拽一個矩形到頂部和底部并分別命名為和
3. 拖拽一個動態面板到元件中間,并調整大小,命名為內容
4.雙擊,編輯的面板狀態。
也可以直接雙擊拖進去的那個動態面板,然后雙擊進行編輯。
5.如下圖所示,雙擊之后會出現一個藍色虛線矩形框。
在內容/(index)中再拖進來一個動態面板(注意是“內容”這個動態面板的中再拖進來一個動態面板,弄兩層動態面板是為了遮住滾動條,后面會提到。如果不介意有滾動條,則直接一個動態面板,然后雙擊往里面加東西(不必調整藍色虛線框也就是動態面板的大小),然后在這個頁面的右邊“屬性”欄中有個“滾動條”,選擇“自動顯示垂直滾動條”即可,這一部分有不懂的小伙伴可以留言討論,就不贅述啦~),調整大小,然后命名為“滑動滾動效果實現”
雙擊“滑動滾動效果實現”這個動態面板的,
在打開的藍色虛線框里面任意加一些東西,為了方便,我們拖拽5個矩形過來(注意暫時不要再去調整藍色虛線框的大小,這就是手機屏幕的顯示區域------里面的內容可以超出虛線框,但是如果不像水平方向滑動,不要在水平方向超出藍色框框的范圍)。縮小編輯區域后效果如下圖所示:
7.點擊 “發布---預覽”
并沒有實現滑動或滾動效果??
好吧~~如需實現滾動效果請看1),如需實現滑動效果請直接看2)
1)實現滾動效果
在“手機滑動效果實現”(即第二層動態面板)的編輯頁面中,找到屬性選項卡中的“滾動條”,如果需要水平、豎直方向的滾動條都顯示,請選中“自動顯示滾動條”,這里我們只需要顯示垂直滾動條。
保存,發布,預覽隱藏圖標切換效果在手機里怎么用法,效果如下:
對于移動端頁面布局來說,出現滾動條其實并不美觀。
這里弄兩層動態面板的優勢就顯現出來了:
回到內容(第一層)動態面板的,
將第二層動態面板的滾動條這個范圍拉到第一層動態面板的范圍之外,這樣滾動條就不再“內容”動態面板的顯示范圍了,看上去就是沒有滾動條的樣子。
發布,預覽,效果如下:
自己調一下內層動態面板的(或內容的)位置,讓它們往中間一點即可~
2)為了后面效果看起來比較明顯,還是給那5的矩形加一個背景色,分別為:“紅橙黃綠藍”,然后在“內容”動態面板的中調整它里面的動態面板“滑動滾動效果實現”的高度,讓它能顯示所有的內容。
在“內容”動態面板中(外層)雙擊“拖動時”,添加動作“移動”,配置動作“滑動滾動效果實現(動態面板)”(內層),然后移動選擇“垂直移動”。
點擊確定,
其實,做到這一步已經實現了滑動效果了,但是為了讓滑動看起來更加合理一點------拖到最下面了,不能再往下拖;拖到最上面了,不能再網上拖。以頂部導航欄和底部導航欄作為參考點,當向上拖動內層動態面板(也就是我們的閱讀內容)的時候,如果已經拖到底了,就讓最后一行的內容顯示在屏幕可見區域的底部;當向下拉閱讀內容的時候,如果在屏幕可見區域的最上面正好是閱讀內容的第一行,就不能再往下拉了,這個我們通過絕對定位來實現隱藏圖標切換效果在手機里怎么用法,,希望這里我說明白了,如果又不懂的,可以留言討論(主要用來參考拖動范圍,如果效果圖中不需要導航欄,可以隨便拖一個矩形或者占位符并將它們設為隱藏就可以了)。
同樣地,在“內容”面板的屬性欄雙擊“拖動結束時”
點擊“添加條件”,
點擊確定,然后添加動作“移動”,配置動作“滑動滾動效果實現(動態面板)”,移動“絕對位置”,x:0,y:0;
這個條件配置是說:當我往下拉的時候,如果已經拉到內容區域沒能跟頂部導航欄接觸了,就讓“滑動滾動效果實現”這個面板的位置為:絕對位置x:0.y:0(它相對于父面板“內容”面板定位)。
再次在“內容”面板的屬性欄雙擊“拖動結束時”
這個條件配置是說:當我往上拉的時候,如果已經拉到內容區域沒能跟底部導航欄接觸了,就讓“滑動滾動效果實現”這個面板的位置為:絕對位置x:0.y:-304(它相對于父面板“內容”面板定位)。
-304這個值怎么來的呢?我們先看一下兩個動態面板的坐標和大小:
這是“內容”動態面板的坐標和寬高:我們只需關注其高為587
這是“滑動滾動效果實現”的左邊和寬高,相對于“內容”動態面板,它的偏移量為(0,0),高為934
934-587=347,也就是說:在為滑動屏幕內容的情況下,有347像素的內容未顯示出來,當我滾動內容到最下面的時候,“滑動滾動效果實現”動態面板的最頂部相對于“內容”在y軸方向的偏移量就應該是-347。
弄個“線性”動畫效果是為了使過渡效果更平滑些,至于時間,根據自己的需要來定即可~
最終效果是這樣的:
最后的交互事件如下圖:
需注意的點就是在一個動態面板里面()中在放置一個動態面板(我們姑且稱之為內層動態面板),然后在內層動態面板里面繪制內容,然后回到外層動態面板中把內層動態面板的高拉長(這是滾動與滑動的區別,滾動無需調整面板的高,弄個滾動條即可),一直到可以顯示所有內容;最后在外層面板中添加配置內層動態面板的交互事件。
當然,我這里的尺寸可能并不符合設計規范,正規的請參考這篇文章:
如有謬誤,還請指出!