码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2018-11-03 23:14:18      阅读:2252      评论:0      收藏:0      [点我收藏+]

标签:ide   air   img   env   inf   最大值   unit   代码   nba   

原理

  • 血条使用进度条组件,可以得到当前值与最大值。
  • 通过动效-改变缩放可以让图片宽度从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);                         // 播放血量动画
}

实现结果
技术分享图片

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

标签:ide   air   img   env   inf   最大值   unit   代码   nba   

原文地址:https://www.cnblogs.com/zonciu/p/9902125.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!