酷播亮新聞
在我們打開任何手機app滑動的手勢最多的永遠是兩種，上下滑動與左右滑動，這個原型是如何在Axure裡面怎麼體現出來的呢？ 接下來我就來告訴大家。
要完成這看似簡單的操作，其實還是要有一些技巧的。 Axure軟件動態面板屬性可以滑動，但是滑動的結果只能是水平和垂直兩種分開的情況。
但是也不是沒有辦法實現同頁面上下、左右滑動這個效果。
主要突破點在 對條件的判斷 。
我們回想一下使用手機App軟件的情形，按住屏幕不鬆手指向下滑動屏幕，手機裡面頁面只能向下（上）滑動，無論你手再怎麼左右滑動，其結果還是向下（上）滑動； 向左右滑動屏幕也是一樣的道理。
所以，手給屏幕一個動作，頁面判斷手滑動屏幕的方向，執行手最初始手滑動屏幕方向移動，而且不鬆手，屏幕移動只能維持豎直或者水平兩種效果，並不能從豎直移動轉換 到水平移動，除非鬆手後頁面再次執行判斷。 即手最開始的動作決定了頁面滑動的方向。
抓住這一點，通過已學Axure軟件知識點，我想出如下實現該功能方案。
一、重要定義
1. 三個動態面板
- 動態面板A、B ——A和B為嵌套關係，A在外層，B在內層
- 動態面板C——兩個狀態循環記錄全局變量x、y
2. 兩個全局變量
- x=沿x軸拖動總距離的絕對值向上取整（[[math.abs(math.ceil(TotalDragX))]])
- y=沿y軸拖動總距離的絕對值向上取整（[[math.abs(math.ceil(TotalDragY))]])
二、核心問題——如合精確且迅捷的知道手移動屏幕的方向？
我通過多次嘗試終於測試出一種結果較為理想的方法：
拖動動態面板A開始，通過動態面板C兩個狀態快速循環，在其狀態改變時記錄全局變量x、y，進而判斷拖動動態面板A時x、y大小從而知道其頁面（動態面板B） 滑動方向。
流程圖如下：
三、具體原型設計
做一個手機外殼，內嵌寬高325X575的內聯框架，連接框架到內容頁面：
設置全局變量x、y；
點擊菜單欄中-項目-全局變量，新增兩個全局變量x和y，設值為空或0；
向新的頁面添加一個帶頁碼的矩形標識框，複製成三份，分別代表第一頁、第二頁、第三頁，名稱分別為1、2、3。
將這三個頁面圈起來—右鍵—轉換為動態面板，設置該動態面板名稱為B，再點擊動態面板B—右鍵—轉換為動態面板，設置最外層動態面板名稱為A。
再往動態面板A外面拖入一個新的動態面板C,把動態面板狀態添加到兩個。
在動態面板A上設置如下用例：
拖動開始時：設置動態面板C狀態為Next，向後循環，間隔 2ms（時間要短）；
拖動時：判斷全局變量x，y大小；
x>y時水平移動動態面板B，x
拖動結束時：設置動態面板C停止循環。
在動態面板C上設置用例
狀態改變時：設置全局變量值。
x=[[math.abs(math.ceil(TotalDragX))]]，y=[[math.abs(math.ceil(TotalDragY))]]
點擊菜單欄發布-預覽即可看到同頁面實現了左右、上下兩種拖動效果。
emmmmmmm覺得看著很不舒服我們可以進一步完善原型：
增加：
- 頁面拖動範圍和水平拖動的兩種效果
- 緩慢拖動
- 快速拖動
在原來的原型基礎上：
1. 頁面範圍的限制條件可以添加在動態面板A拖動時-界限-添加邊界
水平拖動而言，知道動態面板B元件的寬高為975X1000，單個矩形頁面寬高為325X1000。 所以水平拖動限制邊界範圍為[-650，0]即可滿足水平拖動時不會把頁面拖瀏覽邊框。
同樣的垂直拖動，限制邊界範圍為[-500，0]即可。
2. 緩慢拖動
試想一下手指緩慢滑動屏幕（拖動時間長），頁面也跟隨滑動，當滑動距離超過半個頁面寬度時，會跳轉到下一頁面，沒有超過時會回到當前頁面。 要實現這個功能，只需要在動態面板A上添加以下用例：
動態面板A 拖動結束時：
如果拖動時間（dragtime）大於300ms，移動動態面板B以線性300ms的方式到達位置x=[[math.min(Bx/325).tofixed(0)*325]]，y=[[target.y ]]
解釋：math.min(x),取最小值，在此僅用於把(B.x/325)由 數值變為對象； B.x,動態面板B的左邊界；
LVAR.toFixed(decimalPoints)表示對對象四捨五入，decimalPoints為小數點後幾位，注意，該函數只能針對對象使用，不能針對值使用，故把(Bx/325)轉變為對象才能使用該函數；target. y目標元件（動態面板B）的上邊界。
math.min(Bx/325).tofixed(0)*325，這個意思就是動態面板B左邊界與頁面寬度的比值四捨五入後再乘以頁面寬度的值，這個值（0，-325，-650） 即動態面板移動到相應的頁面的x軸坐標。
3. 快速拖動
快速拖動頁面，對應手指左右快速滑動屏幕，屏幕會直接跳轉到下一頁面。
這種情況下拖動時間短，需要考慮的是 拖動方向 與 當前頁面位置 。
拖動方向利用TotalDragX來決定，其值大於0則是向右拖動，小於0向左拖動。
當前頁面位置，通過判斷動態面板B的左邊界位置即可。
在動態面板A上添加用例：
動態面板A 拖動結束時：
- case2.1（第一頁左滑到第二頁）拖動時間（dragtime）小於300ms，沿x軸拖動總距離（TotalDragX）小於0且動態面板B左邊界大於-325時，線性300ms移動動態 面板B到達（-325，target.y）
- case2.2（第二頁左滑到第三頁） 拖動時間（dragtime）小於300ms，沿x軸拖動總距離（TotalDragX）小於0且動態面板B左邊界為（-650，-325）時 ，線性300ms移動動態面板B到達（-650，target.y）
- case2.3 （第三頁右滑到第二頁）拖動時間（dragtime）小於300ms，沿x軸拖動總距離（TotalDragX）大於0且動態面板B左邊界為（-650，-325）時 ，線性300ms移動動態面板B到達（-325，target.y）
- case2.4 （第二頁右滑到第一頁）拖動時間（dragtime）小於300ms，沿x軸拖動總距離（TotalDragX）大於0且動態面板B左邊界大於-325時，線性300ms移動動態 面板B到達（0，target.y）
在此，該原型得以完善。
此原型可以在同一頁面實現上下、左右滑動，且滑動頁面不會超出頁面，左右滑動時，有慢速和快速滑動兩種方式皆可實現頁面跳轉。
好了，就這麼多了。 第一次寫這個累死了，emmm下次會好好排版的，謝謝觀看。
emmmmmmm
差點忘記貼連接了：
https://d3gt76.axshare.com
本文由 @嘟嘟噠嘟噠 原創發布。 未經許可，禁止轉載。
題圖來自 Unsplash，基於CC0協議。