本篇文章將詳細(xì)地展示了如何使用動(dòng)態(tài)面板實(shí)現(xiàn)iOS開(kāi)關(guān)特效，enjoy~

最終效果

知識(shí)點(diǎn)

動(dòng)態(tài)面板；

交互 – 設(shè)置動(dòng)態(tài)面板；

交互 –?移動(dòng)；

交互 –?隱藏。

制作過(guò)程

首先我們創(chuàng)建一個(gè)動(dòng)態(tài)面板，名稱(chēng)定義為“按鈕背景”，將面板尺寸設(shè)置為50?x 30，并且點(diǎn)擊“+”按鈕，新增2個(gè)不同的面板，名稱(chēng)分別為“open”和“close”，同時(shí)我們雙擊open和close面板，在面板中分別繪制2個(gè)背景色塊（可以見(jiàn)事例）：

下一步，我們?cè)谥黜?yè)面繪制效果所需的元件，并且將白色元件，定義名稱(chēng)為“白色按鈕”：

將顯示內(nèi)容，定義名稱(chēng)為“打開(kāi)內(nèi)容”：

下一步，我們來(lái)創(chuàng)建交互動(dòng)作，選擇“按鈕背景”動(dòng)態(tài)面板，雙擊“鼠標(biāo)單擊時(shí)”，打開(kāi)交互面板，首先我們來(lái)添加一個(gè)條件判斷，點(diǎn)擊“添加條件”按鈕，打開(kāi)條件設(shè)立面板，如圖所示進(jìn)行設(shè)置：

創(chuàng)建完成后，我們?yōu)椤按蜷_(kāi)內(nèi)容”元件來(lái)添加交互，如圖所示：

下一步，分別為“白色按鈕”添加移動(dòng)的特效，如圖所示：

并且為“按鈕背景”動(dòng)態(tài)面板進(jìn)行設(shè)置。

至此，我們完成了點(diǎn)擊開(kāi)關(guān)按鈕后，內(nèi)容元件隱藏的特效。

下面我們來(lái)創(chuàng)建，再次點(diǎn)擊按鈕，內(nèi)容元件顯示的效果。

選擇“按鈕背景”動(dòng)態(tài)面板，雙擊“鼠標(biāo)單擊時(shí)”，打開(kāi)交互面板，添加case2，同樣我們先添加條件，將面板狀態(tài)設(shè)置為“close”。

下一步，為內(nèi)容元素添加顯示的特效：

并且為“白色按鈕”元件，增加移動(dòng)的特效：

最后，將動(dòng)態(tài)面板“按鈕背景”設(shè)置面板為“open”：

全部設(shè)置完成后，點(diǎn)擊鍵盤(pán)“F5”按鍵，進(jìn)行預(yù)覽。

源文件下載

https://pan.baidu.com/s/1mHJLeC0K6vvoFt5aFOZScQ

作者：ZQZ原型師，專(zhuān)注原型設(shè)計(jì)/交互設(shè)計(jì)

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

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