我們?cè)谠O(shè)計(jì)APP選項(xiàng)時(shí)鹿寻，對(duì)于只有兩個(gè)選項(xiàng)的抉擇時(shí)下拉顯然不是那么好操作娱挨，這是我們可以選擇使用切換開關(guān)按鈕來實(shí)現(xiàn)這個(gè)功能，下面是原型動(dòng)演示態(tài)圖醉途，這是我參考微信設(shè)計(jì)的：
首先我們來創(chuàng)建原件，這里主要用到了快關(guān)（組合）這下面的兩個(gè)原件砖茸，創(chuàng)建一個(gè)巨型和一個(gè)圓隘擎，原件寬度自己定，高度一樣即可凉夯，創(chuàng)建完以后需要把兩個(gè)元件居中對(duì)齊货葬，然后分別命名為按鈕和背景。
從動(dòng)畫我們可以看到劲够，當(dāng)我們點(diǎn)擊的時(shí)候背景色在變化震桶，這里我們是設(shè)置了選中狀態(tài)，當(dāng)我們選中原件時(shí)替換原有的顏色即可征绎，這里我設(shè)置了按鈕的邊框顏色和背景的背景色蹲姐，讓他們?cè)谶x中是跟背景顏色一致。
接下來進(jìn)行交互設(shè)計(jì)人柿，當(dāng)我們選中按鈕時(shí)將按鈕移動(dòng)右側(cè)柴墩，再次點(diǎn)擊按鈕時(shí)將按鈕移到左側(cè)，因?yàn)樵腦坐標(biāo)是以左邊為基準(zhǔn)的凫岖，所以我們?cè)谟?jì)算坐標(biāo)時(shí)要把本身的寬度計(jì)算進(jìn)去江咳，首先是從左到右移動(dòng)，這里我們選中按鈕在下方找到X右邊的FX點(diǎn)進(jìn)去定義按鈕和背景的局部變量哥放，然后插入值[[LVAR1.x+LVAR2.width-LVAR1.width]]歼指，y軸水平不變，直接賦值即可[[target.y]]甥雕，動(dòng)畫選擇線性500ms即可踩身。
接著是反向移動(dòng)，原理跟上面一樣犀农，只是計(jì)算的時(shí)候我們需要先加上按鈕本身的寬度再減去背景的寬度惰赋，這樣x坐標(biāo)就回到了之前的位置了：[[LVAR1.x+LVAR1.width-LVAR2.width]]，y軸水平不變呵哨，直接賦值即可[[target.y]]赁濒，動(dòng)畫選擇線性500ms即可。
到這里我們的按鈕已經(jīng)實(shí)現(xiàn)了左右切換了孟害，但是你會(huì)發(fā)現(xiàn)點(diǎn)擊按鈕時(shí)會(huì)出現(xiàn)連個(gè)case事件拒炎，不好操作，所以我們需要再事件前面添加一個(gè)判斷語(yǔ)句挨务，當(dāng)按鈕原件選中時(shí)執(zhí)行那個(gè)事件击你，按鈕原件未選中時(shí)執(zhí)行那個(gè)事件（默認(rèn)是為選中狀態(tài)的）玉组。
現(xiàn)在我們就已經(jīng)實(shí)現(xiàn)了切換樣式了，但是你會(huì)發(fā)現(xiàn)狀態(tài)沒有發(fā)生改變丁侄，因?yàn)槟壳斑€沒有設(shè)置選中狀態(tài)惯雳，這里我們要在事件后面繼續(xù)添加一個(gè)選中狀態(tài)，當(dāng)我們點(diǎn)擊按鈕時(shí)鸿摇，設(shè)置按鈕和背景為選中狀態(tài)石景，這樣我們選中狀態(tài)中的顏色就會(huì)被切換了，當(dāng)我們?cè)俅吸c(diǎn)擊按鈕時(shí)取消選中狀態(tài)即可拙吉。
這樣我們的切換樣式就實(shí)現(xiàn)了潮孽，因?yàn)檫@是手機(jī)端的設(shè)計(jì)，點(diǎn)擊按鈕還是不怎么方便筷黔，所以這里我再加個(gè)功能往史，當(dāng)我點(diǎn)擊背景時(shí)就可以實(shí)現(xiàn)按鈕的切換，這樣操作更符合app使用（微信也是這樣設(shè)計(jì)的）佛舱，這里直接把按鈕的事件復(fù)制到背景上即可椎例。
