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協議。