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協議