如何實(shí)現(xiàn)radio單選框在任何Web和APP應(yīng)用中的效果，一起來文中看看~

radio單選框在任何Web和APP應(yīng)用中都非常常見，效果如下：

操作步驟：

（1）從Sketch或Adobe XD導(dǎo)入設(shè)計(jì)內(nèi)容，內(nèi)容中應(yīng)分別包含已選中和未選中效果的圖層。

（2）我們復(fù)制一個(gè)radio-active圖層“radio-active副本”，并按照箭頭的方向，將其移動(dòng)至“Fran?ais”radio框的位置，并記錄其位置為146,98。

再次將“radio-active副本”圖層依次移動(dòng)至其他未選中radio框的位置并記錄其XY坐標(biāo)。

小知識(shí)：如下圖中“eclipse”的位置顯示為0,0，是因?yàn)樵撟鴺?biāo)為其相對(duì)于“radio-inactive-fra”這個(gè)容器層的位置，需要特別注意。

（3）為radio-inactive-fra圖層添加觸發(fā)器：點(diǎn)擊“添加觸發(fā)器” – 選擇“單擊” – 選擇“radio-active-fra”（可輸入關(guān)鍵詞搜索并選擇；如果在圖層欄內(nèi)已選中該圖層，則無需再搜索） – 點(diǎn)擊“單擊”下方的“+”號(hào)選擇“移動(dòng)”效果 – 在默認(rèn)的“移動(dòng)至”選項(xiàng)下方輸入坐標(biāo)“146,98”。

小技巧：如果只是向X軸或Y軸單向移動(dòng)的話（即所有radio框的X軸坐標(biāo)或Y軸坐標(biāo)都相同），則可以不填寫X軸坐標(biāo)或Y軸坐標(biāo)。但本案例中所有radio框分兩排，故不適用該技巧。

（4）按照步驟3依次為其他4個(gè)inactive圖層設(shè)置觸發(fā)器效果，同時(shí)也別忘了為初始已選中的“English”添加同樣的觸發(fā)器效果。

（5）在預(yù)覽窗內(nèi)預(yù)覽效果。

本文由 @ROGER 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議