下面分享一個常見得支持切換效果（放大縮小得感覺），要學會該效果，需掌握兩個知識點：改變組件尺寸和移動組件位置。

先看下完成得效果：

step1：基礎知識點掌握1. 改變支持尺寸

（1）縮小效果

【縮小效果】點擊“縮小”按鈕時，以左上角為中心，縮小支持尺寸為原支持長寬得80%，[[Target.widthgov0.8]]中，Target指目標組件，因為該事件改變得是支持組件，所以Target指原型中支持，Target.width即為原支持得寬度，[[Target.heightgov0.8]]與之同理。

寫法如下：

（2）放大效果

點擊“放大”按鈕時，以右上角為中心，放大支持為原支持長寬得125%，即gov1.25，寫法如下：

大家也專業(yè)嘗試以不同錨點得放大縮小效果。

2. 移動組件位置

（1）移動到相對位置

點擊“固定移動x+30，y+30”按鈕時，支持相對于原位置x+30，y+30移動，x,y為原支持組件得位置，即支持左上角點得x,y坐標，寫法如下：

（2）移動到可能嗎？位置（到達）

點擊“移動到（0，0）”按鈕時，支持移動到gu固定原點位置（0，0）寫法如下：

掌握以上兩個知識點，即開始下面效果得制作。

step2：初始組件準備初始組件準備與排布

如下圖，猥瑣方便使用，大圖尺寸為500gov300，小圖為大圖尺寸得80%，即400gov240；從左到右，位置分別為（300，100）、（500、70）、（800、100），根據(jù)支持內容，分別命名為su、wx、co。

如下圖：

step3：交互事件寫法1. 第壹個向左事件（默認狀態(tài)下）

默認狀態(tài)下中間展示wx支持，點擊向左時，wx支持縮小為400gov240，co支持放大為500gov300，同時移動三個支持位置wx（300，100），co（500，70），su（800，100）；容易被忘記得事，還要設置將co支持置頂（若沒有該事件，默認還是wx支持在頂部會擋住co支持）。

寫法如下：

2. 增加條件判斷

點擊左邊按鈕，當wx居中展示時，則co居中；當co居中時，則su居中；當su居中時，則wx居中。因此點擊左邊按鈕時，需要增加判斷，這里我們拖入一個文字組件記錄當前支持居中狀態(tài)，默認判斷文字組件文字為wx，點擊時，改變判斷組件文字，并在上述1事件中添加判斷條件，當判斷文字=wx時，如下圖：

3. 記錄當前狀態(tài)

在上述事件中，新增設置”判斷“文字為變化后得狀態(tài)，即co，到此即完成了狀態(tài)為wx時，左邊按鈕得完整事件，如下圖：

4. 敬請關注輯狀態(tài)為co時，左邊按鈕事件

同樣為左邊按鈕，復制上述完整case1事件，敬請關注輯判斷文字為co時，點擊向左時，co支持縮小為400gov240，su支持放大為500gov300，同時移動三個支持位置co（300，100），su（500，70），wx（800，100），置頂su支持，設置判斷文字為su，事件如下圖：

5. 敬請關注輯狀態(tài)為su時，左邊按鈕事件

同樣為左邊按鈕，復制上述完整case2事件，敬請關注輯判斷文字為su時，點擊向左時，su支持縮小為400gov240，wx支持放大為500gov300，同時移動三個支持位置su（300，100），wx（500，70），co（800，100），置頂wx支持，設置判斷文字為wx，事件如下圖：

操作到此，即完成了左邊按鈕得全部事件。

6. 敬請關注輯右邊按鈕case1事件（當判斷=wx時）

當判斷=wx時，點擊右邊按鈕，wx支持縮小為400gov240，su支持放大為500gov300，同時移動三個支持位置co（300，100），su（500，70），wx（800，100），置頂su支持，設置判斷文字為su，事件如下圖：

7. 敬請關注輯右邊按鈕case2、case3事件（當判斷=su、co時）

同樣得方法，敬請關注輯當判斷=su、co時右邊按鈕得事件，則完整得右邊按鈕事件，如圖：

到此為止，則完成了整個騷氣得支持切換放大縮小效果（把判斷文字組件隱藏），預覽如下：

有想要做得效果或者想知道得知識點，專業(yè)留言，如果我會，專業(yè)下次出～

：五月，微信公眾號：五月頻道（wuyuepd）

本文由 等五月 來自互聯(lián)網(wǎng)發(fā)布于人人都是產品經理。未經許可，禁止轉載