[簡介]
為了想要讓進入不同Panel時有明顯的變化,又要順暢的在不同Panel移動時,可以不會有斷點且smooth的轉換,又想表達VFX的效果,所以會調整Panel明暗度為主,以顯示VFX的效果。
1.在Hierarchy點選按鈕元件,在Inspector選擇Button block,再按下Auto Generate Animation就會自動產出相關於button的五組animation


2.在Window->Animation,開啟Animation的編輯介面,選擇Highlighted的animation,再點選Add property會跳出選取視窗,選擇Image->Color,就可以在動畫直接調整該圖示的色彩。

3.設定動畫影格,調整透明度值,因為背景是黑色的,所以調整透明度就會剛好像是調整明暗度。
[0:00] Color a:0
[0:40] Color a:0.4
Hover後會有0.4秒產生動畫變暗。

4.實際的動畫效果,時間調整可以等有hover參數加入後再來修正即可。

5.要記得把動畫的loop勾選取消,才會只播放一次。

[小結]
先試做一組Panel的移動效果,從Normal到hover測試,還沒包含hover和exit互動的方式,先看視覺的感受,如果覺得還不錯就可以。但覺得會卡頓的話,會希望在加上互動前,就先把視覺效果和一組的Panel先調好,之後修正才不會找不到問題在那裡。
