這篇是對(duì)上一篇文章《Axure：圖片切換放大、縮小效果展示》的兩點(diǎn)改進(jìn)，改進(jìn)一，優(yōu)化事件寫法，提高制作效率；改進(jìn)二，自動(dòng)播放效果。

先看下完成的效果：

step1：效率優(yōu)化

1. 優(yōu)化思路

不管是點(diǎn)擊左邊按鈕抑或右邊按鈕，效果只有三種：要么wx居中、要么su居中、要么co居中。那么，是否可以只寫左邊按鈕事件，然后直接復(fù)制右邊按鈕使用呢？答案是肯定的（當(dāng)然需要一點(diǎn)點(diǎn)小的改動(dòng)）。

不管點(diǎn)擊左邊按鈕還是右邊按鈕，圖片尺寸總是一大兩小，并移動(dòng)三個(gè)圖片位置即可。

2. 左按鈕事件優(yōu)化

注意到上一篇文章我們寫改變尺寸時(shí)，只寫了需要改變的兩個(gè)圖片大小，另一個(gè)不需要變化大小的圖片尺寸我們并未設(shè)置，在這里，我們可以把這個(gè)本來不需要改變的圖片尺寸事件也寫上去，以左邊按鈕，判斷=wx時(shí)為例，補(bǔ)充后的case1事件如下：

同理，完成左邊按鈕case2、case3事件的優(yōu)化，優(yōu)化后的左按鈕完整事件如下：

到此，左邊按鈕事件完成。

3. 右邊按鈕事件編輯

（1）復(fù)制按鈕事件

刪除原有右邊按鈕事件，將新的左邊按鈕事件完整復(fù)制到右邊，復(fù)制后右邊按鈕事件如下（與左邊按按鈕完全一致）：

（2）右邊按鈕修改思路

• 當(dāng)判斷=wx時(shí)，點(diǎn)擊右邊按鈕后，su居中，該效果與左邊按鈕case2事件效果一致，只需要將（右邊按鈕）case2事件條件改為當(dāng)判斷=wx即可；
• 當(dāng)判斷=su時(shí)，點(diǎn)擊右邊按鈕后，co居中，該效果與左邊按鈕case1事件效果一致，只需要將（右邊按鈕）case1事件條件改為當(dāng)判斷=su即可；
• 當(dāng)判斷=co時(shí)，點(diǎn)擊右邊按鈕后，wx居中，該效果與左邊按鈕case3事件效果一致，只需要將（右邊按鈕）case3事件條件改為當(dāng)判斷=co即可。

修改后的右邊按鈕完整事件如下：

至此，就完成了上一篇文章中的全部效果，減少寫右邊按鈕事件的時(shí)間。

step2：自動(dòng)輪播效果

1. 思路分析

自動(dòng)輪播是一個(gè)不停休的動(dòng)作，這時(shí)候大家就應(yīng)該想到用動(dòng)態(tài)面板（別問我為什么，因?yàn)閯?dòng)態(tài)面板有個(gè)狀態(tài)改變時(shí)事件，通過改變狀態(tài)和狀態(tài)改變時(shí)事件達(dá)到一個(gè)持續(xù)的效果），這可以參考前面一篇文章《Axure-動(dòng)態(tài)面板實(shí)現(xiàn)輪播圖效果圖》

事情是這樣子的，進(jìn)來頁(yè)面后，圖片就開始輪播，輪播的效果應(yīng)該與連續(xù)點(diǎn)擊左邊按鈕一致（這時(shí)候就要想到直接把左邊按鈕的事件復(fù)制到那個(gè)狀態(tài)改變時(shí)了）。

2. 輪播事件設(shè)置

（1）準(zhǔn)備動(dòng)態(tài)面板組件

拖入一個(gè)空白的動(dòng)態(tài)面板，設(shè)置面板有兩層狀態(tài)。

（2）動(dòng)態(tài)面板載入時(shí)事件

動(dòng)態(tài)面板載入時(shí)，控制動(dòng)態(tài)面板狀態(tài)為next，循環(huán)播放（向后循環(huán)），循環(huán)時(shí)間為2000毫秒。

（3）動(dòng)態(tài)面板狀態(tài)改變時(shí)事件

將左邊按鈕鼠標(biāo)單擊事件，完整復(fù)制到動(dòng)態(tài)面板狀態(tài)改變時(shí)事件，事件如下圖：

至此，則完成了自動(dòng)輪播效果，預(yù)覽如下：

有想要做的效果或者想知道的知識(shí)點(diǎn)，可以留言，如果我會(huì)，可以下次出～

作者：五月，微信公眾號(hào)：五月頻道（wuyuepd）

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