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大?。?/p>
x>y時水平移動動態面板B,x<y時垂直移動動態面板B;
拖動結束時:設置動態面板C停止循環。
在動態面板C上設置用例
狀態改變時:設置全局變量值。
x=[[math.abs(math.ceil(TotalDragX))]],y=[[math.abs(math.ceil(TotalDragY))]]
點擊菜單欄發布-預覽即可看到同頁面實現了左右、上下兩種拖動效果。
emmmmmmm覺得看著很不舒服我們可以進一步完善原型:
增加:
頁面拖動范圍和水平拖動的兩種效果
緩慢拖動
快速拖動
在原來的原型基礎上:
1. 頁面范圍的限制條件可以添加在動態面板A拖動時-界限-添加邊界
水平拖動而言,知道動態面板B元件的寬高為975X1000,單個矩形頁面寬高為325X1000。所以水平拖動限制邊界范圍為[-650,0]即可滿足水平拖動時不會把頁面拖瀏覽邊框。
同樣的垂直拖動,限制邊界范圍為[-500,0]即可。