編輯導(dǎo)語：關(guān)于移動(dòng)端可拖動(dòng)Banner，我們應(yīng)該看到過許多，但是對(duì)于如何上手操作去實(shí)現(xiàn)這項(xiàng)功能，卻很少有人知道或者實(shí)踐過。今天，本文作者通過實(shí)際操作為我們演示了如何通過Axure實(shí)現(xiàn)移動(dòng)端可拖動(dòng)Banner。

我們用Axure做移動(dòng)端原型時(shí)經(jīng)常需要做Banner，今天來做一個(gè)可以拖動(dòng)切換的Banner。

一、原型要求

1. Banner圖每3秒自動(dòng)向左滾動(dòng)切換；
2. 拖動(dòng)Banner圖切換（大幅度拖動(dòng)切換，小幅度不切換，拖動(dòng)過程中不切換，拖動(dòng)停止時(shí)切換）；
3. 點(diǎn)擊標(biāo)簽切換到對(duì)應(yīng)頁面；
4. 每次切換后，重新等待3秒再自動(dòng)切換。

二、實(shí)現(xiàn)原理

1. 利用動(dòng)態(tài)面板的“載入時(shí)”-“設(shè)置面板狀態(tài)”實(shí)現(xiàn)循環(huán)自動(dòng)切換；
2. 利用“設(shè)置面板狀態(tài)”打斷循環(huán)自動(dòng)切換。

三、動(dòng)手制作

1、首先準(zhǔn)備幾張用來做Banner的圖片，這里找了5張400*225的圖片；

2、在頁面上放入一個(gè)動(dòng)態(tài)面板（尺寸400*225），改名“Banner面板”，添加空狀態(tài)state2至state5；

3、Banner面板的state1內(nèi)放入一個(gè)動(dòng)態(tài)面板，尺寸與Banner面板一致，改名“拖動(dòng)面版”；

4、在拖動(dòng)面板的state1內(nèi)，（0,0）（-400,0）（400,0）各放一個(gè)400*225的圖片圖片元件；

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

6、在頁面上放入一個(gè)動(dòng)態(tài)面板（尺寸400*50），改名“Banner標(biāo)簽”，添加空狀態(tài)state2至state5；

7、在Banner標(biāo)簽的state1內(nèi)放入一個(gè)400*50的矩形，填充顏色改成線性半透明，填充文字并調(diào)整好位置，改名“標(biāo)題文字”；再放入1個(gè)20*20的按鈕，白色邊線白色文字透明填充底色，填入數(shù)字1，元件選中樣式改為黑色字體白色填充底色，改名“標(biāo)簽按鈕”；

8、對(duì)Banner面板的交互

（1）載入時(shí)：

1）設(shè)置面板狀態(tài)

1. Banner面板，狀態(tài)：下一項(xiàng)并向后循環(huán)，進(jìn)入動(dòng)畫：向左滑動(dòng) 500ms，更多選項(xiàng)：循環(huán)間隔3000ms，首個(gè)狀態(tài)延時(shí)3000ms后切換；
2. Banner標(biāo)簽，狀態(tài)：下一項(xiàng)并向后循環(huán)，進(jìn)入動(dòng)畫：逐漸 500ms，更多選項(xiàng)：循環(huán)間隔3000ms，首個(gè)狀態(tài)延時(shí)3000ms后切換。

這時(shí)候可以先預(yù)覽一下，面板已經(jīng)可以自動(dòng)切換了，只是state2至state5里面沒有原件，看起來就空空如也。

9、對(duì)拖動(dòng)面板的互動(dòng)

（1）拖動(dòng)開始時(shí)：

1. 設(shè)置面板狀態(tài)：Banner面板，狀態(tài)為停止循環(huán)
2. 設(shè)置面板狀態(tài)：Banner標(biāo)簽，狀態(tài)為停止循環(huán)

（2）拖動(dòng)時(shí)

移動(dòng)：Banner圖，跟隨水平拖動(dòng)，邊界：左側(cè)<=0，右側(cè)>=400(保證向左和向右都最多拖動(dòng)一張圖的距離)。

（3）拖動(dòng)結(jié)束時(shí)

1）情形1：值TotalDragX <= -100 （向左橫向拖動(dòng)1/4頁面寬度時(shí)）

1. 移動(dòng)：Banner圖到達(dá)(-800,0)，動(dòng)畫：線性300ms （看起來切換到下一個(gè)狀態(tài)）；
2. 設(shè)置面板狀態(tài)：Banner標(biāo)簽，狀態(tài)：下一項(xiàng)并向后循環(huán)，進(jìn)入動(dòng)畫：逐漸 300ms；
3. 等待：300ms （等待上面的移動(dòng)動(dòng)畫結(jié)束）；
4. 設(shè)置面板狀態(tài)：Banner面板到下一項(xiàng)并向后循環(huán) （真正切換到下一個(gè)狀態(tài)）；
5. ?移動(dòng)：Banner圖回拖動(dòng)前位置（元件歸位）；
6. ?觸發(fā)事件：Banner面板的載入時(shí)（重新開始自動(dòng)切換）。

2）情形2：TotalDragX >= 100 （向右橫向拖動(dòng)1/4頁面寬度時(shí)）

1. ?移動(dòng)：Banner圖到達(dá)(0,0)，動(dòng)畫：線性300ms （看起來切換到上一個(gè)狀態(tài)）；
2. ?設(shè)置面板狀態(tài)：Banner標(biāo)簽，狀態(tài)：上一項(xiàng)并向后循環(huán)，進(jìn)入動(dòng)畫：逐漸 300ms；
3. ?等待：300ms （等待上面的移動(dòng)動(dòng)畫結(jié)束）；
4. ?設(shè)置面板狀態(tài)：Banner面板到上一項(xiàng)并向后循環(huán) （真正切換到上一個(gè)狀態(tài)）；
5. ?移動(dòng)：Banner圖回拖動(dòng)前位置（元件歸位）；
6. ?觸發(fā)事件：Banner面板的載入時(shí)（重新開始自動(dòng)切換）。

3）情形3：（左右拖動(dòng)不足1/4頁面寬度時(shí)）

1. ? 移動(dòng)：Banner圖回拖動(dòng)前位置，動(dòng)畫：線性300ms；
2. ?觸發(fā)事件：Banner面板的載入時(shí)（重新開始自動(dòng)切換）。

10、將拖動(dòng)面板復(fù)制到Banner面板的state2 至 state5。

11、對(duì)Banner標(biāo)簽的互動(dòng)：

（1）state1內(nèi)的標(biāo)簽按鈕 單擊時(shí)：

1. 設(shè)置面板狀態(tài)：Banner面板 到 state1，進(jìn)入動(dòng)畫：向左滑動(dòng)500ms；
2. 設(shè)置面板狀態(tài)：Banner標(biāo)簽 到 state1，進(jìn)入動(dòng)畫：逐漸500ms；
3. 觸發(fā)事件：Banner面板 載入時(shí)。

（2）將標(biāo)簽按鈕復(fù)制4個(gè)，文字分別改為2 – 5，并將互動(dòng)中的Banner面板和Banner標(biāo)簽都的設(shè)置面板狀態(tài)改為state2 – state5。

（3）將state1內(nèi)的標(biāo)題文字和5個(gè)標(biāo)簽按鈕復(fù)制到Banner標(biāo)簽的state2 – state5，將state1的標(biāo)簽按鈕1設(shè)為選中，將state2的標(biāo)簽按鈕2設(shè)為選中，以此類推；再修改各個(gè)state中的標(biāo)題文字。

12、將我們最初準(zhǔn)備好的圖片，放到Banner面板內(nèi)的對(duì)應(yīng)狀態(tài)里的拖動(dòng)面板里面的圖片原件，比如state1里的Banner圖，中間放1號(hào)圖片，右邊放2號(hào)圖片，左邊放5號(hào)圖片；state2里的Banner圖，中間放2號(hào)圖片，右邊放3號(hào)圖片，左邊放1號(hào)圖片，以此類推。

13、現(xiàn)在我們就把可以拖動(dòng)的高保真Banner做好了，趕緊F5預(yù)覽一下吧。

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

本文由@Goffe 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議