開(kāi)關(guān)按鈕的效果是我們的產(chǎn)品原型中常見(jiàn)的一種效果，不管移動(dòng)端還是PC端都會(huì)用到。那么可能有同學(xué)會(huì)問(wèn)，既然這么常見(jiàn)，它應(yīng)該如何實(shí)現(xiàn)？別急，下面就會(huì)帶大家用幾種不同的方法來(lái)制作開(kāi)關(guān)。Let’s go!

?

先來(lái)看一下，開(kāi)關(guān)效果是怎樣的

好的，看到了這個(gè)效果，我們就根據(jù)這個(gè)效果一起來(lái)看看，可以用什么方法來(lái)做?？梢钥吹剑_(kāi)關(guān)有兩種狀態(tài)，“開(kāi)”和“關(guān)”，點(diǎn)擊之后，會(huì)在這兩種狀態(tài)之間進(jìn)行切換。

第一，可以將“開(kāi)”和“關(guān)”兩種不同的狀態(tài)分別做成兩個(gè)組件。

然后將這兩個(gè)組件的大小和位置調(diào)整成一致，這樣在視覺(jué)上就只能看到一個(gè)組件了。

在做交互設(shè)置的時(shí)候，在這里其實(shí)也有兩種不同的設(shè)置方法：

?

1、置頂/置底。用這個(gè)方法來(lái)設(shè)置，可以讓“開(kāi)”和“關(guān)”交替著展示在最上層，也就是我們能看到的。

2、 顯示/隱藏。這個(gè)方法就是“開(kāi)”和“關(guān)”兩個(gè)狀態(tài)的組件不能同時(shí)顯示，我們只能看到其中一個(gè)的存在。一樣可以達(dá)到我們想要的效果。

在做的時(shí)候要注意，兩個(gè)組件都必須設(shè)置交互。假如在“開(kāi)”上設(shè)置交互，點(diǎn)擊之后它會(huì)在底部或者隱藏，這時(shí)我們要進(jìn)行操作的是“關(guān)”。所以必須要對(duì)兩個(gè)組件都進(jìn)行設(shè)置。

第二，用動(dòng)態(tài)面板來(lái)做。

將“開(kāi)”和“關(guān)”兩種不同的狀態(tài)分別制作為動(dòng)態(tài)面板的兩個(gè)不同的狀態(tài)，然后設(shè)置動(dòng)態(tài)面板在不同的狀態(tài)切換。在“開(kāi)”的狀態(tài)下點(diǎn)擊開(kāi)關(guān)，切換到“關(guān)”，“關(guān)”的狀態(tài)下同樣的道理。

這里我們分析的是“開(kāi)”和“關(guān)”兩個(gè)狀態(tài)之間的不同顯示和切換，從視覺(jué)效果上達(dá)到開(kāi)、關(guān)的效果。這種思路我們也可以用在很多的地方，比如，輸入密碼通?？梢哉{(diào)整密碼為可見(jiàn)或不可見(jiàn)，就可以用我們上面分析的思路去制作。

說(shuō)回開(kāi)關(guān)效果，除了“開(kāi)”“關(guān)”狀態(tài)之外，我們?cè)倏纯葱Ч故荆?/strong>

是不是可以將這個(gè)效果看成是中間的按鈕在進(jìn)行移動(dòng)，同時(shí)改變顏色呢？當(dāng)然是可以的。

第三，需要將開(kāi)關(guān)看成兩個(gè)部分，一個(gè)是帶文字的部分，一個(gè)可以移動(dòng)的按鈕。

因?yàn)殚_(kāi)和關(guān)是不同的樣式，所以我們可以設(shè)置選中樣式，這樣就有默認(rèn)樣式和選中樣式，兩種。

?

在進(jìn)行交互設(shè)置的時(shí)候，我們需要看一下按鈕的位置，如果按鈕處于開(kāi)的位置（我的位置是93，215），這時(shí)候點(diǎn)擊就要讓背景部分樣式改變，按鈕移動(dòng)到關(guān)的位置（138,215）并且樣式改變；如果按鈕處于關(guān)的位置，點(diǎn)擊的時(shí)候同樣樣式會(huì)改變，按鈕移動(dòng)到開(kāi)的位置。

這樣分析下來(lái)就可以知道，我們這里要設(shè)置條件了。

這是讓按鈕移動(dòng)到指定的位置：（93,215）和（138,215），叫絕對(duì)位置（有些漢化版本叫做到達(dá)）。還有一個(gè)是相對(duì)位置（經(jīng)過(guò)），這里我們其實(shí)也可以設(shè)置相對(duì)位置的移動(dòng)。

?

它移動(dòng)的距離是多少呢？垂直方面沒(méi)有移動(dòng)，所以y軸上的相對(duì)距離是0。主要看x軸，從138移動(dòng)到93，是向左移動(dòng)了45，也就是-45；從93到138，向右移動(dòng)了45，也就是45。

總結(jié)一下，這個(gè)開(kāi)關(guān)按鈕的效果看起來(lái)好像挺簡(jiǎn)單，分析下來(lái)之后我們可以用好幾種方法來(lái)做：置頂/置底；顯示/隱藏；設(shè)置面板狀態(tài)；移動(dòng)-絕對(duì)距離；移動(dòng)-相對(duì)距離，一共5種不同的做法,并且這些方法在最終效果上是一樣的。當(dāng)然，這是比較常用的做法，還有一些這里沒(méi)有列舉出來(lái)的做法，等待大家一起分享。

?

分析思路不同，得到的交互設(shè)置方法就不同。所以，我們列舉了不同的實(shí)現(xiàn)方法，并不是希望大家將方法生搬硬套，而是希望大家能夠?qū)W會(huì)分析，學(xué)會(huì)舉一反三，能夠?qū)⒎椒`活應(yīng)用，找到最適合自己，或者最適合產(chǎn)品的方法。

標(biāo)簽：