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. 原始檔下載
ofollow,noindex">https://pan.baidu.com/s/11IuP2aez8VmyyCXGA_Moag
作者：ZQZ原型師，專注原型設計/互動設計
本文由 @ZQZ原型師 原創釋出於人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基於CC0協議。