Banner圖片聯(lián)動(dòng)伸縮效果

Axure做動(dòng)態(tài)效果，只要了解了其動(dòng)作規(guī)律就很好實(shí)現(xiàn)。

一、分析動(dòng)作

1. 分析整體如下所示，是圖片寬度和位移的改變；

2. 分析細(xì)節(jié)1，圖片初始只顯示一部分，移上去才顯示完整；

3. 分析細(xì)節(jié)2，初始無(wú)按鈕，移上去有按鈕；

二、準(zhǔn)備

1. 添加n個(gè)（這里是4）動(dòng)態(tài)面板，分別命名“1”、“2”、“3”、“4”；

2. 添加一個(gè)矩形元件，命名“事件觸發(fā)器”，初始為顯示狀態(tài)；

我個(gè)人有時(shí)候比較喜歡將所有事件寫在一個(gè)元件上，可以把它叫做事件觸發(fā)器，有點(diǎn)像程序開發(fā)中的function()，邏輯如下：

它的顯示隱藏狀態(tài)變化來(lái)做事件觸發(fā)的動(dòng)作。

設(shè)置幾個(gè)局部變量值，橙色“值”的元件需要命名，對(duì)應(yīng)英文“w”、”wplus”、”n”、”h”、”x”。

使用／局部變量／方便將整個(gè)動(dòng)畫打包為一個(gè)組件使用在任何地方，使用／變量／方便根據(jù)需要一鍵改變圖片大小等。“x”的值時(shí)組件加載時(shí)動(dòng)態(tài)獵取 的，計(jì)算公式為：

三、實(shí)現(xiàn)效果

1. 鼠標(biāo)移上去圖片伸展

在每張圖片上都添加相同事件

第幾張圖片，

，這里的數(shù)字就是幾。注意：標(biāo)注的“1”、“2”步執(zhí)行順序不能調(diào)換。

在矩形“事件觸發(fā)器”上添加／隱藏／事件，案例中是獵取 的元件文字值，為了方便理解，右側(cè)寫了原理，按照所寫的文字內(nèi)容添加事件即可。

2. 鼠標(biāo)移出圖片還原

在每張圖片上都添加相同事件：

在矩形“事件觸發(fā)器”上添加／顯示／事件：

3. 細(xì)節(jié)1，圖片初始只顯示一部分，移上去才顯示完整

存放圖片的動(dòng)態(tài)面板設(shè)置背景，如下設(shè)置：

4. 細(xì)節(jié)2，初始無(wú)按鈕，移上去有按鈕

在存放圖片的動(dòng)態(tài)面板里放置按鈕，初始隱藏。

鼠標(biāo)移入時(shí)，在“事件觸發(fā)器”上的隱藏事件中添加一步，顯示按鈕。

鼠標(biāo)移出時(shí)，在“事件觸發(fā)器”上的顯示事件中添加一步，隱藏按鈕。

在按鈕上添加隱藏顯示事件。