解析MATERIAL DESIGN中交互動畫效果之FAB

 　　進入正題，先看效果：

　　這是基於我目前正在制作的一款音樂播放器為功能原型的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的交互動畫效果的心得分享。

　　謝謝!