本篇教程將揭示若何建造懸浮按鈕殊效，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. 源文件下載

 

作者：ZQZ原型師，專一原型設想/交互設想

本文由 @ZQZ原型師 首創宣布于大家都是產物司理，未經允許，制止轉載。

題圖來自 Unsplash，基于CC0和談。