本文針對(duì)的對(duì)象為對(duì)Pixate有一定了解的中高級(jí)用戶，Pixate是一款針對(duì)設(shè)計(jì)師設(shè)計(jì)的原型開發(fā)工具。無需任何代碼，即可實(shí)現(xiàn)基于原生效果的動(dòng)態(tài)原型設(shè)計(jì)。這次我將通過Material Design中一則經(jīng)典的FAB（Floating Action Button）動(dòng)畫案例來分享我是如何利用Pixate來實(shí)現(xiàn)這個(gè)效果的。（由于本文涉及的對(duì)象是中高級(jí)用戶，且篇幅有限，我僅提供制作思路和一些關(guān)鍵參數(shù)。）

如果你完全沒有接觸過Pixate可以看我寫的另一篇關(guān)于Pixate的入門教程：《WINDOWS設(shè)計(jì)師也可以用！免費(fèi)動(dòng)效神器PIXATE初級(jí)教程（一）》。

進(jìn)入正題，先看效果：

這是基于我目前正在制作的一款音樂播放器為功能原型的FAB案列：

當(dāng)觸發(fā)底部的“正在播放音樂“欄上的暫定按鈕時(shí)，當(dāng)前音樂暫停，且音樂欄將收攏形成一個(gè)圓形的Floating Button，當(dāng)點(diǎn)擊FAB所代表的播放按鈕后，則FAB擴(kuò)展為之前的“正在播放音樂“欄，繼續(xù)播放音樂。

Google在其MaterialDesign Guideline中將其描述為：

Toolbar

The floating action button can transform into a toolbar upon press or from a toolbar upon scroll. The toolbar can contain related actions, text and search fields, or any other items that would be useful at hand.

參考了Guideline后，我繪制了這樣的一個(gè)過渡動(dòng)畫參考：

通過上面的分鏡草圖可以看出，過去動(dòng)畫效果實(shí)際分為兩部分：

“位移”和“展開”。而“展開”的范圍也被限定為FAB圓形按鈕的直徑范圍。

由此可以看出，設(shè)置FAB擴(kuò)展的范圍應(yīng)是我們需要特別留意的。

而在Pixate的制作中，我們恰恰可以利用底部欄圖層的Clipping屬性+FAB資源本身的縮放屬性來進(jìn)行相應(yīng)的效果制作：

（為了便于位置的對(duì)應(yīng)和識(shí)別，我把底部欄設(shè)置為紅色）

因?yàn)镃lipping屬性只是一次性的開關(guān)，而無法依據(jù)相關(guān)層級(jí)的活動(dòng)屬性來設(shè)定條件開啟。所以一旦將FAB的展開范圍固定后，則無法正常顯示圓形FAB常住右下角的狀態(tài)。

為此我們需要通過一個(gè)小障眼法來解決這個(gè)問題：

1. 復(fù)制出兩個(gè)FAB

一個(gè)作為正常狀態(tài)下的常住顯示區(qū)域（FAB）；一個(gè)僅用作與擴(kuò)展時(shí)的過渡動(dòng)畫效果（FAB Effect）。

2.設(shè)置FAB與FAB Effect交替

點(diǎn)擊FAB位移至FAB Effect坐標(biāo)并透明消失，此時(shí)FAB Effect顯示并完成展開過度的動(dòng)畫效果。（收起時(shí)反之亦然）

（供參考的圖層設(shè)置和位置布局）

接下來就是考驗(yàn)各位的耐性和細(xì)致，如何去調(diào)整兩個(gè)FAB間交替時(shí)的Duration（動(dòng)畫周期)和Delay(延時(shí))值了。

Tips：

1.最后在FAB和FAB Effect交互過度時(shí)，推薦使用ease in和ease out下的circular曲線屬性來展示FAB的位移。

2.如果你夠仔細(xì)會(huì)注意到我將播放按鈕和FAB拆開為兩個(gè)資源元素。因?yàn)檫@樣在收起來成為圓形按鈕時(shí)可以單獨(dú)控制播放按鈕顯示過度和時(shí)間。目的主要是不被殘影留存所影響而感覺轉(zhuǎn)變比較生硬。并且會(huì)使得過度動(dòng)畫產(chǎn)生更生動(dòng)。

希望以上我所提供的制作思路對(duì)你有所幫助。我也會(huì)在今后不定期的添加更多在Pixate上制作基于MaterialDesign的交互動(dòng)畫效果的心得分享。

謝謝！

?【動(dòng)效神器Hype零基礎(chǔ)入門教程系列】

先聊一下這個(gè)軟件的強(qiáng)大功能，附上簡(jiǎn)單教程！
《Sketch神助攻！無代碼做動(dòng)效神器Hype3入門教程》

中國(guó)臺(tái)灣設(shè)計(jì)師叫你用Hype做原型過場(chǎng)！
《無代碼動(dòng)效神器！教你用HYPE3做APP原型的基礎(chǔ)過場(chǎng)（附神器）》

美丫姐手把手教你用Hype做Path菜單動(dòng)畫！
《比AE還方便！教你用HYPE無代碼制作PATH扇形菜單動(dòng)畫》

作者：@Jaret_杰瑞特

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁(yè)設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量99萬的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：