楠木軒

Axure實現移動端可拖動Banner

由 聊素麗 發佈於 科技

編輯導語：關於移動端可拖動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；

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

4、在拖動面板的state1內，（0,0）（-400,0）（400,0）各放一個400*225的圖片圖片元件；

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

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

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

8、對Banner面板的交互

（1）載入時：

1）設置面板狀態

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

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

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面板的載入時（重新開始自動切換）。

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

11、對Banner標籤的互動：

（1）state1內的標籤按鈕 單擊時：

  1. 設置面板狀態：Banner面板 到 state1，進入動畫：向左滑動500ms；
  2. 設置面板狀態：Banner標籤 到 state1，進入動畫：逐漸500ms；
  3. 觸發事件：Banner面板 載入時。

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

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

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

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

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

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

題圖來自Unsplash，基於CC0協議