綠色排版工具|熱門專題|網站地圖|移動官網
您的當前位置:網站首頁 > 產品運營 > 正文

Protopie教程:如何制作懸浮按鈕

來源: 編輯: 時間:2019-11-18 15:19:43 閱讀:

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

Protopie教程:如何制作懸浮按鈕

一、最終效果

Protopie教程:如何制作懸浮按鈕

二、功能點介紹

  • 單擊
  • 旋轉
  • 移動
  • 條件

三、制作過程

1. 首先我們來看一下,本案例中用到的元素

如下圖所示:

Protopie教程:如何制作懸浮按鈕

在上圖中,我們已經將點擊“主按鈕”后,3個子按鈕(賬戶、手機、郵箱)展開時的位置排列完成,并且記錄下了子按鈕的位置坐標。

賬戶(X:115 / Y:439)、手機(X:197 / Y:409)、郵箱(X:262 / Y:439)。

Protopie教程:如何制作懸浮按鈕

由于默認狀態下,子按鈕時隱藏的(其實就是層位置上處于主按鈕下方),我們需要將4個按鈕坐標全部修改成一致X:190 / Y:475。

下一步我們創建動作,選擇“主按鈕”圖層,創建“單擊”的觸發動作,然后添加“條件”的參數,這里我們條件基準選擇“按鈕_新增”,類型選擇“旋轉”,判斷選擇“=”,并且設置參數值為“0”。

Protopie教程:如何制作懸浮按鈕

下一步創建主按鈕點擊的動效,選擇“按鈕_新增”圖層,添加“旋轉”參數,設置“每次旋轉”,值為“180”度,旋轉方向“順時針”,意思是每次點擊主按鈕時,“按鈕_新增”元素,順時針選擇180度。

Protopie教程:如何制作懸浮按鈕

下一步創建點擊主按鈕后,子按鈕的移動動效,依次選擇3個子按鈕,分別為3個按鈕添加“移動”的參數,并且將參數值設置為:賬戶(X:115 / Y:439)、手機(X:197 / Y:409)、郵箱(X:262 / Y:439)。

Protopie教程:如何制作懸浮按鈕

設置完成后,我們就完成了點擊主按鈕后,展現子按鈕的動效。

下一步,我們完成再次點擊“主按鈕”,子菜單收回的特效。

在“單擊”的觸發動作下,添加新的“條件”的參數,這里我們條件基準依然選擇“按鈕_新增”,類型選擇“旋轉”,判斷選擇“=”,并且設置參數值為“180”。

這里設置180的意思表示:當“按鈕_新增”這個元素當前旋轉值為180時,調用下方的動作。

Protopie教程:如何制作懸浮按鈕

接著我們選擇“按鈕_新增”圖層,添加“旋轉”參數,設置“每次旋轉”,值為“180”度,旋轉方向“逆時針”,意思是每次點擊主按鈕時,“按鈕_新增”元素,逆時針選擇180度。

Protopie教程:如何制作懸浮按鈕

然后依次對3個子菜單添加“移動”的參數,并且將移動后的值設置為X:190 / Y:475。

完成上述設置,我們看一下最終的效果。

Protopie教程:如何制作懸浮按鈕

2. 源文件下載

 

作者:ZQZ原型師,專注原型設計/交互設計

本文由 @ZQZ原型師 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自 Unsplash,基于CC0協議。

圖文精選:

欄目分類
最新文章
熱門文章
推薦文章

Copyright?2012-2019 小螞蟻信息網版權所有 粵ICP備14061018號


鄭重聲明:本網站資源、信息來源于網絡,完全免費共享,僅供學習和研究使用,版權和著作權歸原作者所有,如有不愿意被轉載的情況,請通知我們刪除已轉載的信息。

Top 双色球10000期走势图表