起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Protopie教程：如何制作懸浮按鈕
本篇教程將展示如何制作懸浮按鈕特效，enjoy~ ^_^
一、最終效果
二、功能點介紹
- 單擊
- 旋轉
- 移動
- 條件
三、制作過程
1. 首先我們來看一下，本案例中用到的元素
如下圖所示：
在上圖中，我們已經將點擊“主按鈕”后，3個子按鈕（賬戶、手機、郵箱）展開時的位置排列完成，并且記錄下了子按鈕的位置坐標。
賬戶（X：115 / Y：439）、手機（X：197 / Y：409）、郵箱（X：262 / Y：439）。
由于默認狀態下，子按鈕時隱藏的（其實就是層位置上處于主按鈕下方），我們需要將4個按鈕坐標全部修改成一致X：190 / Y：475。
下一步我們創建動作，選擇“主按鈕”圖層，創建“單擊”的觸發動作，然后添加“條件”的參數，這里我們條件基準選擇“按鈕_新增”，類型選擇“旋轉”，判斷選擇“=”，并且設置參數值為“0”。
下一步創建主按鈕點擊的動效，選擇“按鈕_新增”圖層，添加“旋轉”參數，設置“每次旋轉”，值為“180”度，旋轉方向“順時針”，意思是每次點擊主按鈕時，“按鈕_新增”元素，順時針選擇180度。
下一步創建點擊主按鈕后，子按鈕的移動動效，依次選擇3個子按鈕，分別為3個按鈕添加“移動”的參數，并且將參數值設置為：賬戶（X：115 / Y：439）、手機（X：197 / Y：409）、郵箱（X：262 / Y：439）。
設置完成后，我們就完成了點擊主按鈕后，展現子按鈕的動效。
下一步，我們完成再次點擊“主按鈕”，子菜單收回的特效。
在“單擊”的觸發動作下，添加新的“條件”的參數，這里我們條件基準依然選擇“按鈕_新增”，類型選擇“旋轉”，判斷選擇“=”，并且設置參數值為“180”。
這里設置180的意思表示：當“按鈕_新增”這個元素當前旋轉值為180時，調用下方的動作。
接著我們選擇“按鈕_新增”圖層，添加“旋轉”參數，設置“每次旋轉”，值為“180”度，旋轉方向“逆時針”，意思是每次點擊主按鈕時，“按鈕_新增”元素，逆時針選擇180度。
然后依次對3個子菜單添加“移動”的參數，并且將移動后的值設置為X：190 / Y：475。
完成上述設置，我們看一下最終的效果。
2. 源文件下載
https://pan.baidu.com/s/11IuP2aez8VmyyCXGA_Moag
作者：ZQZ原型師，專注原型設計/交互設計
本文由 @ZQZ原型師 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議。
圖片中使用的是什么軟件??？
protopie啊
是的
??