Axure教程:動態面板實現輪播圖效果

收藏待读

動態面板在axure里經常被使用到,它是一個多層容器。舉例來說,好比一本書有很多頁面,每一個頁面(層)放不同內容,他可以與其它元件組合使用,實現動態切換改變狀態的效果。

Axure教程:動態面板實現輪播圖效果

先看下預覽效果:

Axure教程:動態面板實現輪播圖效果

Step1. 準備圖片素材

以人人都是產品經理的輪播圖為例,可以使用谷瀏覽器,右擊你要的圖片,選擇「檢查」功能,在代碼區複製你需要的圖片地址,就可以打開下載(其他方式的隨意)

Axure教程:動態面板實現輪播圖效果

Step2. 組件排布與樣式設置

1. 拖入基礎組件

如下圖,拖入準備好的圖片素材,拖入文字組件和三個矩形(水平分佈好)。

Axure教程:動態面板實現輪播圖效果

2. 設置組件樣式

設置大圖樣式,圓角為10;

全選下方三個矩形,設置樣式圓角為80,透明度為70%,並設置其交互樣式,選中時狀態填充顏色為白色,透明度100%。

Axure教程:動態面板實現輪播圖效果

3. 創建動態面板

全選所有組件,右擊-轉換為動態面板:

Axure教程:動態面板實現輪播圖效果

4. 複製多層動態面板

雙擊動態面板,給動態面板命名,點擊複製按鈕,複製出三層面板:

Axure教程:動態面板實現輪播圖效果

5. 編輯多層動態面板

雙擊state2,編輯state2內容,將圖片文字替換,右擊第二個小橫條,將其設置為選中狀態,同理完成state3的編輯,並對state1中第一個小橫條進行默認選中,這時候已經完成整個動態面板的樣式。

Axure教程:動態面板實現輪播圖效果

6. 添加左右箭頭

如圖,添加左右箭頭(可以是圖片,也可以自己做),將其設置為默認隱藏,這時候完成了所有組件的設置與排布。

Axure教程:動態面板實現輪播圖效果

Step3. 交互效果設置

1. 設置面板自由輪播

因為頁面進入時,就開始輪播,所以交互觸發條件為「載入時」,點中動態面板,設置載入時事件如下,循環播放面板。

Axure教程:動態面板實現輪播圖效果

2. 設置鼠標移入面板時顯示左右箭頭,移出動態面板時隱藏左右箭頭

常見的錯誤做法是:直接點輪播圖面板,事件如下圖,這種做法會導致鼠標移入時,確實是顯示了左右箭頭,但是鼠標要移動左右箭頭時,左右箭頭會狂閃或隱藏(因為你在鼠標移入左右箭頭時,就是鼠標移出輪播圖的時候,這時候會觸發隱藏左右箭頭的事件)。

Axure教程:動態面板實現輪播圖效果

正確的做法是:將左右箭頭與輪播圖全選,右擊轉為一個新的大面板,鼠標移入大面板時,顯示左右箭頭,鼠標移出大面板時,隱藏左右箭頭。

Axure教程:動態面板實現輪播圖效果

3. 點擊左右箭頭,切換動態面板狀態

點選左箭頭,設置點擊時,輪播圖面板為下一狀態,同理設置右箭頭點擊時,輪播圖面板為上一狀態。

Axure教程:動態面板實現輪播圖效果

Step4. 干擾修正

以上的操作,實際預覽會產生一個問題,就是當點擊箭頭切換後,輪播圖不會再自動輪播,因為點擊箭頭後,會中斷輪播圖自身「載入時」自動播放下一個的事件,效果如下:

Axure教程:動態面板實現輪播圖效果

修正做法:點選輪播圖,將輪播圖面板「載入時」事件,複製到輪播圖面板「狀態改變時」事件即可,事件如下:

Axure教程:動態面板實現輪播圖效果

以上操作,即完成了整個輪播圖效果,預覽效果:

Axure教程:動態面板實現輪播圖效果

有想要做的效果可以留言,如果我會做,可以下次出教程~

作者:五月,微信公眾號:五月頻道(wuyuepd)

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

題圖來自Unsplash,基於CC0協議

相關閱讀

免责声明:本文内容来源于人人都是產品經理,已注明原文出处和链接,文章观点不代表立场,如若侵犯到您的权益,或涉不实谣言,敬请向我们提出检举。