99久久国产成人免费网站,一本大道大臿蕉视频无码,日韩精品一区二区三区中文不卡

搜索

APP

起點課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會員專屬社群

榮耀標(biāo)識

發(fā)布

注冊 | 登錄

Axure實現(xiàn)移動端可拖動Banner（自動切換/標(biāo)簽切換/拖動切換）

Goffe

2021-02-03

0 評論 11457 瀏覽 29 收藏

9 分鐘

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

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

一、原型要求

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

二、實現(xiàn)原理

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

三、動手制作

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

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

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

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

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

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

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

8、對Banner面板的交互

（1）載入時：

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

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

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

9、對拖動面板的互動

（1）拖動開始時：

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

（2）拖動時

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

（3）拖動結(jié)束時

1）情形1：值TotalDragX <= -100 （向左橫向拖動1/4頁面寬度時）

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

2）情形2：TotalDragX >= 100 （向右橫向拖動1/4頁面寬度時）

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

3）情形3：（左右拖動不足1/4頁面寬度時）

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

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

11、對Banner標(biāo)簽的互動：

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

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

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

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

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