Axure教程:上下翻動效果製作步驟詳解
文章主要跟大家介紹,如何利用Axure製作上下翻動效果,一起來看看~
主要是用Axure做手機APP,內容翻動的效果如何實現:
- 讓內容在顯示區域滾動;
- 內容面板沒有接觸到頂部時,讓內容面板移動至頂部;
- 內容面板接觸到頂部,沒有接觸到底部時,把內容面板的底部定位到底部元件位置。
1. 元件佈局
將頂部和底部矩形、動態面板顯示區域先放置好,設定相同的寬度,高度自定,無縫銜接在一起。
以頂部為例,從元件庫中選擇矩形1拉入畫板中,雙擊矩形編寫文字頂部,之後調整頂部的寬和高,如果寬和高固定了,你點選上圖步驟4中箭頭所指位置的藍色小點,去除鎖定即可修改,最後在右下角頁面中雙擊矩形命名為頂部,同理可得底部。
顯示區域是動態面板同樣是從元件庫中選中拉入畫板中,命名方式有兩種,1種在面板選中的情況下,直接在右上角3的區域填寫;第2種則是在右下角頁面處雙擊動態面板彈框中命名,如右下角的3區域。
顯示區域除了長寬要設定,還有最左上端的座標,要承接頂部最坐下端座標,X軸為0,Y軸為頂部高。
內容區域也是動態面板,但是,生成方式跟顯示面板不同,敲黑板這部分是關鍵,初學看了其他的教程摸索很久才弄懂。內容區域是在顯示面板的state1裡面實現的, 雙擊state1進入,然後從元件庫拉入新的畫板中 。設定內容畫板寬度同其他元件,高度比顯示區域大。圖中忘了截圖內容區域命名後的,別忘了要命名。
2. 填充內容面板
雙擊內容面板中的state1,填充一些元素,方便檢視滾動效果,記得操作完要回到首頁。
3. 新增事件
1)讓內容在顯示區域滾動
2)內容面板沒有接觸到頂部時,讓內容面板移動至頂部;意思是你拉下來頁面,讓內容面板上部沒有接觸到頂部時,會自動回到頂部。
先編輯條件,內容面板未接觸頂部時;
讓內容面板移動到頂部,即絕對位置。
3)內容面板接觸到頂部,沒有接觸到底部時,把內容面板的底部定位到底部元件位置。
先編輯條件,內容面板接觸到頂部,但未接觸底部。
讓內容面板移動到底部,移動距離=顯示面板高度-內容面板高度(為負數)。
確認之後預覽即可。
本文由 @粉小妞Holly 原創釋出於人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基於CC0協議