Axure實現移動端可拖動Banner

編輯導語:關於移動端可拖動Banner,我們應該看到過許多,但是對於如何上手操作去實現這項功能,卻很少有人知道或者實踐過。今天,本文作者通過實際操作為我們演示瞭如何通過Axure實現移動端可拖動Banner。

Axure實現移動端可拖動Banner

我們用Axure做移動端原型時經常需要做Banner,今天來做一個可以拖動切換的Banner。

一、原型要求
  1. Banner圖每3秒自動向左滾動切換;
  2. 拖動Banner圖切換(大幅度拖動切換,小幅度不切換,拖動過程中不切換,拖動停止時切換);
  3. 點擊標籤切換到對應頁面;
  4. 每次切換後,重新等待3秒再自動切換。
二、實現原理
  1. 利用動態面板的“載入時”-“設置面板狀態”實現循環自動切換;
  2. 利用“設置面板狀態”打斷循環自動切換。
三、動手製作

1、首先準備幾張用來做Banner的圖片,這裏找了5張400*225的圖片;

2、在頁面上放入一個動態面板(尺寸400*225),改名“Banner面板”,添加空狀態state2至state5;

Axure實現移動端可拖動Banner

3、Banner面板的state1內放入一個動態面板,尺寸與Banner面板一致,改名“拖動面版”;

4、在拖動面板的state1內,(0,0)(-400,0)(400,0)各放一個400*225的圖片圖片元件;

Axure實現移動端可拖動Banner

5、將3個圖片元件Ctrl+G組合,改名“Banner圖”;

6、在頁面上放入一個動態面板(尺寸400*50),改名“Banner標籤”,添加空狀態state2至state5;

7、在Banner標籤的state1內放入一個400*50的矩形,填充顏色改成線性半透明,填充文字並調整好位置,改名“標題文字”;再放入1個20*20的按鈕,白色邊線白色文字透明填充底色,填入數字1,元件選中樣式改為黑色字體白色填充底色,改名“標籤按鈕”;

Axure實現移動端可拖動Banner

8、對Banner面板的交互

(1)載入時:

1)設置面板狀態

  1. Banner面板,狀態:下一項並向後循環,進入動畫:向左滑動 500ms,更多選項:循環間隔3000ms,首個狀態延時3000ms後切換;
  2. Banner標籤,狀態:下一項並向後循環,進入動畫:逐漸 500ms,更多選項:循環間隔3000ms,首個狀態延時3000ms後切換。

這時候可以先預覽一下,面板已經可以自動切換了,只是state2至state5裏面沒有原件,看起來就空空如也。

Axure實現移動端可拖動Banner

9、對拖動面板的互動

(1)拖動開始時:

  1. 設置面板狀態:Banner面板,狀態為停止循環
  2. 設置面板狀態:Banner標籤,狀態為停止循環

(2)拖動時

移動:Banner圖,跟隨水平拖動,邊界:左側<=0,右側>=400(保證向左和向右都最多拖動一張圖的距離)。

(3)拖動結束時

1)情形1:值TotalDragX <= -100 (向左橫向拖動1/4頁面寬度時)

  1. 移動:Banner圖到達(-800,0),動畫:線性300ms (看起來切換到下一個狀態);
  2. 設置面板狀態:Banner標籤,狀態:下一項並向後循環,進入動畫:逐漸 300ms;
  3. 等待:300ms (等待上面的移動動畫結束);
  4. 設置面板狀態:Banner面板到下一項並向後循環 (真正切換到下一個狀態);
  5. 移動:Banner圖回拖動前位置(元件歸位);
  6. 觸發事件:Banner面板的載入時(重新開始自動切換)。

2)情形2:TotalDragX >= 100 (向右橫向拖動1/4頁面寬度時)

  1. 移動:Banner圖到達(0,0),動畫:線性300ms (看起來切換到上一個狀態);
  2. 設置面板狀態:Banner標籤,狀態:上一項並向後循環,進入動畫:逐漸 300ms;
  3. 等待:300ms (等待上面的移動動畫結束);
  4. 設置面板狀態:Banner面板到上一項並向後循環 (真正切換到上一個狀態);
  5. 移動:Banner圖回拖動前位置(元件歸位);
  6. 觸發事件:Banner面板的載入時(重新開始自動切換)。

3)情形3:(左右拖動不足1/4頁面寬度時)

  1. 移動:Banner圖回拖動前位置,動畫:線性300ms;
  2. 觸發事件:Banner面板的載入時(重新開始自動切換)。
Axure實現移動端可拖動Banner

10、將拖動面板複製到Banner面板的state2 至 state5。

11、對Banner標籤的互動:

(1)state1內的標籤按鈕 單擊時:

  1. 設置面板狀態:Banner面板 到 state1,進入動畫:向左滑動500ms;
  2. 設置面板狀態:Banner標籤 到 state1,進入動畫:逐漸500ms;
  3. 觸發事件:Banner面板 載入時。
Axure實現移動端可拖動Banner

(2)將標籤按鈕複製4個,文字分別改為2 – 5,並將互動中的Banner面板和Banner標籤都的設置面板狀態改為state2 – state5。

Axure實現移動端可拖動Banner

(3)將state1內的標題文字和5個標籤按鈕複製到Banner標籤的state2 – state5,將state1的標籤按鈕1設為選中,將state2的標籤按鈕2設為選中,以此類推;再修改各個state中的標題文字。

12、將我們最初準備好的圖片,放到Banner面板內的對應狀態裏的拖動面板裏面的圖片原件,比如state1裏的Banner圖,中間放1號圖片,右邊放2號圖片,左邊放5號圖片;state2裏的Banner圖,中間放2號圖片,右邊放3號圖片,左邊放1號圖片,以此類推。

Axure實現移動端可拖動Banner

13、現在我們就把可以拖動的高保真Banner做好了,趕緊F5預覽一下吧。

原型鏈接:https://no5f2n.axshare.com

本文由@Goffe 原創發佈於人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 2001 字。

轉載請註明: Axure實現移動端可拖動Banner - 楠木軒