本篇教程將展示如何制作懸浮按鈕特效，enjoy~ ^_^

一、最終效果

二、功能點(diǎn)介紹

• 單擊
• 旋轉(zhuǎn)
• 移動(dòng)
• 條件

三、制作過(guò)程

1. 首先我們來(lái)看一下，本案例中用到的元素

如下圖所示：

在上圖中，我們已經(jīng)將點(diǎn)擊“主按鈕”后，3個(gè)子按鈕（賬戶、手機(jī)、郵箱）展開時(shí)的位置排列完成，并且記錄下了子按鈕的位置坐標(biāo)。

賬戶（X：115 / Y：439）、手機(jī)（X：197 / Y：409）、郵箱（X：262 / Y：439）。

由于默認(rèn)狀態(tài)下，子按鈕時(shí)隱藏的（其實(shí)就是層位置上處于主按鈕下方），我們需要將4個(gè)按鈕坐標(biāo)全部修改成一致X：190 / Y：475。

下一步我們創(chuàng)建動(dòng)作，選擇“主按鈕”圖層，創(chuàng)建“單擊”的觸發(fā)動(dòng)作，然后添加“條件”的參數(shù)，這里我們條件基準(zhǔn)選擇“按鈕_新增”，類型選擇“旋轉(zhuǎn)”，判斷選擇“=”，并且設(shè)置參數(shù)值為“0”。

下一步創(chuàng)建主按鈕點(diǎn)擊的動(dòng)效，選擇“按鈕_新增”圖層，添加“旋轉(zhuǎn)”參數(shù)，設(shè)置“每次旋轉(zhuǎn)”，值為“180”度，旋轉(zhuǎn)方向“順時(shí)針”，意思是每次點(diǎn)擊主按鈕時(shí)，“按鈕_新增”元素，順時(shí)針選擇180度。

下一步創(chuàng)建點(diǎn)擊主按鈕后，子按鈕的移動(dòng)動(dòng)效，依次選擇3個(gè)子按鈕，分別為3個(gè)按鈕添加“移動(dòng)”的參數(shù)，并且將參數(shù)值設(shè)置為：賬戶（X：115 / Y：439）、手機(jī)（X：197 / Y：409）、郵箱（X：262 / Y：439）。

設(shè)置完成后，我們就完成了點(diǎn)擊主按鈕后，展現(xiàn)子按鈕的動(dòng)效。

下一步，我們完成再次點(diǎn)擊“主按鈕”，子菜單收回的特效。

在“單擊”的觸發(fā)動(dòng)作下，添加新的“條件”的參數(shù)，這里我們條件基準(zhǔn)依然選擇“按鈕_新增”，類型選擇“旋轉(zhuǎn)”，判斷選擇“=”，并且設(shè)置參數(shù)值為“180”。

這里設(shè)置180的意思表示：當(dāng)“按鈕_新增”這個(gè)元素當(dāng)前旋轉(zhuǎn)值為180時(shí)，調(diào)用下方的動(dòng)作。

接著我們選擇“按鈕_新增”圖層，添加“旋轉(zhuǎn)”參數(shù)，設(shè)置“每次旋轉(zhuǎn)”，值為“180”度，旋轉(zhuǎn)方向“逆時(shí)針”，意思是每次點(diǎn)擊主按鈕時(shí)，“按鈕_新增”元素，逆時(shí)針選擇180度。

然后依次對(duì)3個(gè)子菜單添加“移動(dòng)”的參數(shù)，并且將移動(dòng)后的值設(shè)置為X：190 / Y：475。

完成上述設(shè)置，我們看一下最終的效果。

2. 源文件下載

https://pan.baidu.com/s/11IuP2aez8VmyyCXGA_Moag

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

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

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