tft每日頭條

 > 生活

 > axure的左右滑動切換頁面

axure的左右滑動切換頁面

生活 更新时间:2024-12-23 17:43:20

在我們打開任何手機app滑動的手勢最多的永遠是兩種,上下滑動與左右滑動,這個原型是如何在Axure裡面怎麼體現出來的呢?接下來我就來告訴大家。

axure的左右滑動切換頁面(Axure如何實現同頁面上下)1

要完成這看似簡單的操作,其實還是要有一些技巧的。Axure軟件動态面闆屬性可以滑動,但是滑動的結果隻能是水平和垂直兩種分開的情況。

axure的左右滑動切換頁面(Axure如何實現同頁面上下)2

但是也不是沒有辦法實現同頁面上下、左右滑動這個效果。

主要突破點在對條件的判斷

我們回想一下使用手機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)滑動方向。

流程圖如下:

axure的左右滑動切換頁面(Axure如何實現同頁面上下)3

三、具體原型設計

做一個手機外殼,内嵌寬高325X575的内聯框架,連接框架到内容頁面:

設置全局變量x、y;

點擊菜單欄中-項目-全局變量,新增兩個全局變量x和y,設值為空或0;

向新的頁面添加一個帶頁碼的矩形标識框,複制成三份,分别代表第一頁、第二頁、第三頁,名稱分别為1、2、3。

axure的左右滑動切換頁面(Axure如何實現同頁面上下)4

将這三個頁面圈起來—右鍵—轉換為動态面闆,設置該動态面闆名稱為B,再點擊動态面闆B—右鍵—轉換為動态面闆,設置最外層動态面闆名稱為A。

再往動态面闆A外面拖入一個新的動态面闆C,把動态面闆狀态添加到兩個。

axure的左右滑動切換頁面(Axure如何實現同頁面上下)5

在動态面闆A上設置如下用例:

拖動開始時:設置動态面闆C狀态為Next,向後循環,間隔2ms(時間要短);

拖動時:判斷全局變量x,y大小;

x>y時水平移動動态面闆B,x<y時垂直移動動态面闆B;

拖動結束時:設置動态面闆C停止循環。

axure的左右滑動切換頁面(Axure如何實現同頁面上下)6

在動态面闆C上設置用例

狀态改變時:設置全局變量值。

x=[[math.abs(math.ceil(TotalDragX))]],y=[[math.abs(math.ceil(TotalDragY))]]

axure的左右滑動切換頁面(Axure如何實現同頁面上下)7

點擊菜單欄發布-預覽即可看到同頁面實現了左右、上下兩種拖動效果。

emmmmmmm覺得看着很不舒服我們可以進一步完善原型:

增加:

  1. 頁面拖動範圍和水平拖動的兩種效果
  2. 緩慢拖動
  3. 快速拖動

在原來的原型基礎上:

1. 頁面範圍的限制條件可以添加在動态面闆A拖動時-界限-添加邊界

axure的左右滑動切換頁面(Axure如何實現同頁面上下)8

水平拖動而言,知道動态面闆B元件的寬高為975X1000,單個矩形頁面寬高為325X1000。所以水平拖動限制邊界範圍為[-650,0]即可滿足水平拖動時不會把頁面拖浏覽邊框。

同樣的垂直拖動,限制邊界範圍為[-500,0]即可。

axure的左右滑動切換頁面(Axure如何實現同頁面上下)9

2. 緩慢拖動

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved