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

如果你完全沒有接觸過Pixate可以看我寫的另一篇關于Pixate的入門教程：《WINDOWS設計師也可以用！免費動效神器PIXATE初級教程（一）》。

進入正題，先看效果：

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

當觸發底部的“正在播放音樂“欄上的暫定按鈕時，當前音樂暫停，且音樂欄將收攏形成一個圓形的Floating Button，當點擊FAB所代表的播放按鈕后，則FAB擴展為之前的“正在播放音樂“欄，繼續播放音樂。

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后，我繪制了這樣的一個過渡動畫參考：

通過上面的分鏡草圖可以看出，過去動畫效果實際分為兩部分：

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

由此可以看出，設置FAB擴展的范圍應是我們需要特別留意的。

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

（為了便于位置的對應和識別，我把底部欄設置為紅色）

因為Clipping屬性只是一次性的開關，而無法依據相關層級的活動屬性來設定條件開啟。所以一旦將FAB的展開范圍固定后，則無法正常顯示圓形FAB常住右下角的狀態。

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

1. 復制出兩個FAB

一個作為正常狀態下的常住顯示區域（FAB）；一個僅用作與擴展時的過渡動畫效果（FAB Effect）。

2.設置FAB與FAB Effect交替

點擊FAB位移至FAB Effect坐標并透明消失，此時FAB Effect顯示并完成展開過度的動畫效果。（收起時反之亦然）

（供參考的圖層設置和位置布局）

接下來就是考驗各位的耐性和細致，如何去調整兩個FAB間交替時的Duration（動畫周期)和Delay(延時)值了。

Tips：

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

2.如果你夠仔細會注意到我將播放按鈕和FAB拆開為兩個資源元素。因為這樣在收起來成為圓形按鈕時可以單獨控制播放按鈕顯示過度和時間。目的主要是不被殘影留存所影響而感覺轉變比較生硬。并且會使得過度動畫產生更生動。

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

謝謝！

?【動效神器Hype零基礎入門教程系列】

先聊一下這個軟件的強大功能，附上簡單教程！
《Sketch神助攻！無代碼做動效神器Hype3入門教程》

中國臺灣設計師叫你用Hype做原型過場！
《無代碼動效神器！教你用HYPE3做APP原型的基礎過場（附神器）》

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

作者：@Jaret_杰瑞特

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

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