FairyGUI & Unity使用动效功能实现血条UI扣血与加血的缓动效果

Posted 2021-01-17 zonciu

原理

• 血条使用进度条组件，可以得到当前值与最大值。
• 通过动效-改变缩放可以让图片宽度从1到0按百分比变化。
• 动效可以指定播放动效的时间范围

组件设计

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

• bar是实际血量条
• DownBar是扣血缓动背景图层
• UpBar是加血缓动背景图层
• LowBar是低血量变色（和控制器配合，本文不讲）
• n11组合是血量参考线

发布到Unity。

参考代码

if (hpValue < hpBar.value) // HP降低
{
    hpBar.DownBar.SetScale((float) (hpBar.value / hpBar.max), 1); // 设置扣血层到当前血量位置
    hpBar.UpBar.visible = false;                                  // 加血图层优先于扣血图层，播放扣血动画前应把加血图层隐藏。
    hpBar.value = hpValue;                                        // 设置当前血量
    hpBar.DownBar.TweenScaleX(hpValue / (float) hpBar.max, 1);    // 扣血层缓动缩放到当前血量
}
else if (hpValue > hpBar.value) // HP增加
{
    hpBar.UpBar.SetScale(hpValue / (float) hpBar.max, 1); // 设置加血层缩放
    hpBar.UpBar.visible = true;                           // 显示加血层
    hpBar.TweenValue(hpValue, 1);                         // 播放血量动画
}

实现结果