VFX UI Music app介面實作(2)-按鈕互動使用一次動畫

[簡介]

在製作按鈕hover狀態時,如果需要按鈕只作動一次,而不是一直重覆loop的話,該怎麼做,可以在該動畫的animator中,進行調整。

1.在開始製作按鈕互動之前,先將版面先排好,重要的是物件及VFX特效出現的相對圖層。在這次練習中,需要將VFX音波粒子效果,放在歌單背面;另外歌曲時間的VFX效果的Progress bar要放在前景。

2.先製作動態按鈕,在Hierarchy按右鍵新增一按鈕元件[UI]->[Button]

3.點選元件,在Inspector中選擇Button項目,將Transition切換為Animation,再點選Auto Generate Animation,會自動產生一組包含五種( Normal/Highlighted/Pressed/Selected/Disabled )按鈕互動效果的元件包。

4.點選元件,開啟Animation工作視窗,選擇Highlighted項目,這項目就是滑鼠移上後的hover效果。

5.在Animation面版上按下Add Property,可選擇不同操作動畫類別,也可以時間軸上新增節點,在面板中控制數值,調整參數。

6.動畫設定好之後,點選Animator,再點選 Highlighted 按鈕,在 Inspector中將Loop Time取消勾選,這樣動畫就會只出現一次,不會重覆Loop。

[小結]

滑鼠移上後的hover效果,只會有一次動畫,在動畫的最後一個影格就可以停止,呈現放大效果,移開後就會慢慢縮回,不會直接切斷動畫。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *