【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);                           // 播放加血动画到当前血量
            }

实现结果