Axure教程：Banner圖片聯動伸縮效果
零基礎學產品，BAT產品總監帶，2天線下集訓+1年線上課程，全面掌握優秀產品經理必備技能。 ofollow,noindex">瞭解詳情
釋放雙眼，帶上耳機，聽聽看~！
00:00
00:00
想要用Axure做出動態效果其實並不難，一旦瞭解了其動作，是非常好實現的。本篇文章將會教大家如何用Axure做動態效果。
Axure做動態效果，只要瞭解了其動作規律就很好實現。
一、分析動作
1. 分析整體如下所示，是圖片寬度和位移的改變；
2. 分析細節1，圖片初始只顯示一部分，移上去才顯示完整；
3. 分析細節2，初始無按鈕，移上去有按鈕；
二、準備
1. 新增n個（這裡是4）動態面板，分別命名“1”、“2”、“3”、“4”；
2. 新增一個矩形元件，命名“事件觸發器”，初始為顯示狀態；
我個人有時候比較喜歡將所有事件寫在一個元件上，可以把它叫做事件觸發器，有點像程式開發中的function()，邏輯如下：
它的顯示隱藏狀態變化來做事件觸發的動作。
設定幾個 區域性變數值 ，橙色“值”的元件需要命名，對應英文“w”、”wplus”、”n”、”h”、”x”。
使用／ 區域性變數／ 方便將整個動畫打包為一個元件使用在任何地方，使用／ 變數 ／方便根據需要一鍵改變圖片大小等。 “x”的值時元件載入時動態獲取的，計算公式為 
。
三、實現效果
1. 滑鼠移上去圖片伸展
在 每張圖片 上都新增相同事件
第幾張圖片， 
，這裡的數字就是幾。注意：標註的“1”、“2”步執行順序不能調換。
在矩形“事件觸發器”上新增／ 隱藏 ／事件，案例中是獲取的元件文字值，為了方便理解，右側寫了原理，按照所寫的文字內容新增事件即可。
2. 滑鼠移出圖片還原
在每張圖片上都新增相同事件：
在矩形“事件觸發器”上新增／ 顯示 ／事件：
3. 細節1，圖片初始只顯示一部分，移上去才顯示完整
存放圖片的動態面板設定背景，如下設定：
4. 細節2，初始無按鈕，移上去有按鈕
在存放圖片的動態面板裡放置按鈕，初始 隱藏。
滑鼠移入時，在“事件觸發器”上的隱藏事件中新增一步，顯示按鈕。
滑鼠移出時，在“事件觸發器”上的顯示事件中新增一步，隱藏按鈕。
在按鈕上新增隱藏顯示事件。
-完-
本文由 @灰_白 原創釋出於人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash，基於 CC0 協議
