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