【FairyGUI & Unity】實現血條UI扣血與加血的緩動效果

組件設計

創建一個進度條組件，作為血條。

• bar是實際血量條
• DownBar是扣血緩動背景圖層
• UpBar是加血緩動背景圖層
• LowBar是低血量變色（和控制器配合，本文不講）
• n11組合是血量參考線

發布到Unity。

參考代碼

            if (_lastHP < hpBar.value) // HP降低
            {
                hpBar.UpBar.visible = false;                                 // 隱藏加血層
                hpBar.value = _lastHP;                                       // 設置當前血量
                hpBar.DownBar.TweenScaleX((float) (_lastHP / hpBar.max), 1); // 扣血層緩動縮放到當前血量
            }
            else if (_lastHP > hpBar.value) // HP增加
            {
                hpBar.UpBar.SetScale((float) (_lastHP / hpBar.max), 1); // 設置加血層縮放
                hpBar.UpBar.visible = true;                             // 顯示加血層
                hpBar.TweenValue(_lastHP, 1);                           // 播放加血動畫到當前血量
            }

實現結果