起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure：圖片切換放大、縮小效果展示
下面分享一個常見的圖片切換效果（放大縮小的感覺），要學會該效果，需掌握兩個知識點：改變組件尺寸和移動組件位置。
先看下完成的效果：
step1：基礎知識點掌握
1. 改變圖片尺寸
（1）縮小效果
【縮小效果】點擊“縮小”按鈕時，以左上角為中心，縮小圖片尺寸為原圖片長寬的80%，[[Target.width*0.8]]中，Target指目標組件，因為該事件改變的是圖片組件，所以Target指原型中圖片，Target.width即為原圖片的寬度，[[Target.height*0.8]]與之同理。
寫法如下：
（2）放大效果
點擊“放大”按鈕時，以右上角為中心，放大圖片為原圖片長寬的125%，即*1.25，寫法如下：
大家也可以嘗試以不同錨點的放大縮小效果。
2. 移動組件位置
（1）移動到相對位置
點擊“固定移動x+30，y+30”按鈕時，圖片相對于原位置x+30，y+30移動，x,y為原圖片組件的位置，即圖片左上角點的x,y坐標，寫法如下：
（2）移動到絕對位置（到達）
點擊“移動到（0，0）”按鈕時，圖片移動到gu固定原點位置（0，0）寫法如下：
掌握以上兩個知識點，即開始下面效果的制作。
step2：初始組件準備
初始組件準備與排布
如下圖，為了方便使用，大圖尺寸為500*300，小圖為大圖尺寸的80%，即400*240；從左到右，位置分別為（300，100）、（500、70）、（800、100），根據圖片內容，分別命名為su、wx、co。
如下圖：
step3：交互事件寫法
1. 第一個向左事件（默認狀態下）
默認狀態下中間展示wx圖片，點擊向左時，wx圖片縮小為400*240，co圖片放大為500*300，同時移動三個圖片位置wx（300，100），co（500，70），su（800，100）；容易被忘記的事，還要設置將co圖片置頂（若沒有該事件，默認還是wx圖片在頂部會擋住co圖片）。
寫法如下：
2. 增加條件判斷
點擊左邊按鈕，當wx居中展示時，則co居中；當co居中時，則su居中；當su居中時，則wx居中。因此點擊左邊按鈕時，需要增加判斷，這里我們拖入一個文字組件記錄當前圖片居中狀態，默認判斷文字組件文字為wx，點擊時，改變判斷組件文字，并在上述1事件中添加判斷條件，當判斷文字=wx時，如下圖：
3. 記錄當前狀態
在上述事件中，新增設置”判斷“文字為變化后的狀態，即co，到此即完成了狀態為wx時，左邊按鈕的完整事件，如下圖：
4. 編輯狀態為co時，左邊按鈕事件
同樣為左邊按鈕，復制上述完整case1事件，編輯判斷文字為co時，點擊向左時，co圖片縮小為400*240，su圖片放大為500*300，同時移動三個圖片位置co（300，100），su（500，70），wx（800，100），置頂su圖片，設置判斷文字為su，事件如下圖：
5. 編輯狀態為su時，左邊按鈕事件
同樣為左邊按鈕，復制上述完整case2事件，編輯判斷文字為su時，點擊向左時，su圖片縮小為400*240，wx圖片放大為500*300，同時移動三個圖片位置su（300，100），wx（500，70），co（800，100），置頂wx圖片，設置判斷文字為wx，事件如下圖：
操作到此，即完成了左邊按鈕的全部事件。
6. 編輯右邊按鈕case1事件（當判斷=wx時）
當判斷=wx時，點擊右邊按鈕，wx圖片縮小為400*240，su圖片放大為500*300，同時移動三個圖片位置co（300，100），su（500，70），wx（800，100），置頂su圖片，設置判斷文字為su，事件如下圖：
7. 編輯右邊按鈕case2、case3事件（當判斷=su、co時）
同樣的方法，編輯當判斷=su、co時右邊按鈕的事件，則完整的右邊按鈕事件，如圖：
到此為止，則完成了整個騷氣的圖片切換放大縮小效果（把判斷文字組件隱藏），預覽如下：
有想要做的效果或者想知道的知識點，可以留言，如果我會，可以下次出～
作者：五月，微信公眾號：五月頻道（wuyuepd）
本文由 @五月 原創發布于人人都是產品經理。未經許可，禁止轉載
大佬可以分享原型嗎？
謝大佬分享……