下面分享一個常見得支持切換效果（放大縮小得感覺），要學(xué)會該效果，需掌握兩個知識點：改變組件尺寸和移動組件位置。
先看下完成得效果：
step1：基礎(chǔ)知識點掌握1. 改變支持尺寸（1）縮小效果
【縮小效果】點擊“縮小”按鈕時，以左上角為中心，縮小支持尺寸為原支持長寬得80%，[[Target.widthgov0.8]]中，Target指目標(biāo)組件，因為該事件改變得是支持組件，所以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坐標(biāo)，寫法如下：
（2）移動到可能嗎？位置（到達(dá)）
點擊“移動到（0，0）”按鈕時，支持移動到gu固定原點位置（0，0）寫法如下：
掌握以上兩個知識點，即開始下面效果得制作。
step2：初始組件準(zhǔn)備初始組件準(zhǔn)備與排布如下圖，猥瑣方便使用，大圖尺寸為500gov300，小圖為大圖尺寸得80%，即400gov240；從左到右，位置分別為（300，100）、（500、70）、（800、100），根據(jù)支持內(nèi)容，分別命名為su、wx、co。
如下圖：
step3：交互事件寫法1. 第壹個向左事件（默認(rèn)狀態(tài)下）默認(rèn)狀態(tài)下中間展示wx支持，點擊向左時，wx支持縮小為400gov240，co支持放大為500gov300，同時移動三個支持位置wx（300，100），co（500，70），su（800，100）；容易被忘記得事，還要設(shè)置將co支持置頂（若沒有該事件，默認(rèn)還是wx支持在頂部會擋住co支持）。
寫法如下：
2. 增加條件判斷點擊左邊按鈕，當(dāng)wx居中展示時，則co居中；當(dāng)co居中時，則su居中；當(dāng)su居中時，則wx居中。因此點擊左邊按鈕時，需要增加判斷，這里我們拖入一個文字組件記錄當(dāng)前支持居中狀態(tài)，默認(rèn)判斷文字組件文字為wx，點擊時，改變判斷組件文字，并在上述1事件中添加判斷條件，當(dāng)判斷文字=wx時，如下圖：
3. 記錄當(dāng)前狀態(tài)在上述事件中，新增設(shè)置”判斷“文字為變化后得狀態(tài)，即co，到此即完成了狀態(tài)為wx時，左邊按鈕得完整事件，如下圖：
4. 敬請關(guān)注輯狀態(tài)為co時，左邊按鈕事件同樣為左邊按鈕，復(fù)制上述完整case1事件，敬請關(guān)注輯判斷文字為co時，點擊向左時，co支持縮小為400gov240，su支持放大為500gov300，同時移動三個支持位置co（300，100），su（500，70），wx（800，100），置頂su支持，設(shè)置判斷文字為su，事件如下圖：
5. 敬請關(guān)注輯狀態(tài)為su時，左邊按鈕事件同樣為左邊按鈕，復(fù)制上述完整case2事件，敬請關(guān)注輯判斷文字為su時，點擊向左時，su支持縮小為400gov240，wx支持放大為500gov300，同時移動三個支持位置su（300，100），wx（500，70），co（800，100），置頂wx支持，設(shè)置判斷文字為wx，事件如下圖：
操作到此，即完成了左邊按鈕得全部事件。
6. 敬請關(guān)注輯右邊按鈕case1事件（當(dāng)判斷=wx時）當(dāng)判斷=wx時，點擊右邊按鈕，wx支持縮小為400gov240，su支持放大為500gov300，同時移動三個支持位置co（300，100），su（500，70），wx（800，100），置頂su支持，設(shè)置判斷文字為su，事件如下圖：
7. 敬請關(guān)注輯右邊按鈕case2、case3事件（當(dāng)判斷=su、co時）同樣得方法，敬請關(guān)注輯當(dāng)判斷=su、co時右邊按鈕得事件，則完整得右邊按鈕事件，如圖：
到此為止，則完成了整個騷氣得支持切換放大縮小效果（把判斷文字組件隱藏），預(yù)覽如下：
有想要做得效果或者想知道得知識點，專業(yè)留言，如果我會，專業(yè)下次出～
感謝作者分享：五月，微信公眾號：五月頻道（wuyuepd）
本文由 等五月 來自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
