banner怎樣切換畫(huà)面？

Axure是我們制作界面原型首選的工具軟件，而制作Web原型時(shí)，又難免會(huì)碰到可切換Banner的效果。此篇向大家介紹一種制作可切換Banner，以下就是贏在威客網(wǎng)小編為您推薦的banner切換畫(huà)面。

開(kāi)始

打開(kāi)你的Axure RP，新建一個(gè)RP文件。

制作切換箭頭

1拖一個(gè)矩形到面板

2將這個(gè)矩形的形狀調(diào)整為三角形，作為切換箭頭。再添加一個(gè)切換箭頭，然后調(diào)整兩者的距離，為Banner留出位置。

3添加一個(gè)矩形，作為背景

4添加一個(gè)矩形。

5將這個(gè)矩形轉(zhuǎn)換為動(dòng)態(tài)面板，并命名動(dòng)態(tài)面板。之后我們會(huì)使用這個(gè)動(dòng)態(tài)面板作為我們切換Banner的主體。

制作Banner面板


1雙擊Banner，進(jìn)入到動(dòng)態(tài)面板的狀態(tài)管理界面。

2調(diào)整Banner的狀態(tài)列表，在列表中的狀態(tài)，將為我們將要切換的一個(gè)個(gè)具體的Banner圖

3到Banner的各個(gè)狀態(tài)中，添加需要呈現(xiàn)的圖片。這里要注意狀態(tài)中圖片的尺寸要與Banner動(dòng)態(tài)面板的尺寸一致。

添加切換事件

為切換箭頭添加單擊事件，以保證當(dāng)我們單擊切換箭頭的時(shí)候，可以切換Banner圖

在單擊事件的用例編輯面板中，找到「動(dòng)態(tài)面板 - 設(shè)置面板狀態(tài)」。

配置用例事件的具體屬性。包括選擇的狀態(tài)，這里我們使用「Next」。當(dāng)切換到最后一張Banner的時(shí)候，是否循環(huán)到第一頁(yè)，這里我們選擇「是」。切換的方式，這里需要注意的是，我們需要保證進(jìn)入動(dòng)畫(huà)與退出動(dòng)畫(huà)的Slide方向是一致的，這樣才能夠從左進(jìn)入，再向左退出。

以同樣的方式配置另一個(gè)切換按鈕的用例事件。這里選擇「Previous」「Slide Right」

結(jié)束

至此，我們就完成了可切換Banner效果的制作，按F5可以進(jìn)行預(yù)覽