组件设计

创建一个进度条组件，作为血条。

【FairyGUI & Unity】实现血条UI扣血与加血的缓动效果-LMLPHP

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

            }

实现结果