首页 > 技术文章 > 【FairyGUI & Unity】实现血条UI扣血与加血的缓动效果

zonciu 2018-11-03 21:59 原文

组件设计

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

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

实现结果

推荐阅读