# 使用 slider 模拟血条效果

# 1.UI 中如何创建

右键 UI 中直接创建 Slider


创建 Slider 后会自动生成这个滚动条,在血条中不需要,可以删除

实际上控制填充条的多少就是由 Value 来控制的

然后在 Background 的 Image 中放入边框 UI 图标,然后在 Fill Area 中的 Fill 的 Image 里放入填充 UI 图

# 2. 脚本控制

UI_HealthBar.cs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
using UnityEngine;
using UnityEngine.UI;

// 管理UI血条的类,用于显示实体的生命值和镜像翻转UI
public class UI_HealthBar : MonoBehaviour
{
// 引用实体对象
private Entity entity;
// 引用角色属性
private CharacterStats myStats;
// 血条的UI RectTransform
private RectTransform myTransform;
// 血条的Slider组件
private Slider slider;
// 目标生命值,用于实现平滑的血条过渡
private float targetHealth;

// 初始化方法,绑定事件并设置初始值
private void Start()
{
// 获取血条的 RectTransform 组件
myTransform = GetComponent<RectTransform>();
// 获取父对象中的实体脚本
entity = GetComponentInParent<Entity>();
// 获取子对象中的 Slider 组件
slider = GetComponentInChildren<Slider>();
// 获取父对象中的角色属性脚本
myStats = GetComponentInParent<CharacterStats>();

// 绑定实体翻转事件,用于镜像翻转血条
entity.onFlipped += FlipUI;
// 绑定生命值变化事件,用于更新血条
myStats.onHealthChanged += UpdateHealthUI;

// 初始化 Slider 的最大值为角色的最大生命值
slider.maxValue = myStats.GetMaxHealthValue();
// 初始化目标生命值为角色当前生命值
targetHealth = myStats.currentHealth;
// 设置 Slider 的初始值为目标生命值
slider.value = targetHealth;
}

// 每帧更新,用于平滑血条的过渡动画
private void Update()
{
// 使用 Mathf.Lerp 实现血条值的平滑变化
slider.value = Mathf.Lerp(slider.value, targetHealth, Time.deltaTime * 5);
}

// 更新血条的UI(响应生命值变化事件)
private void UpdateHealthUI()
{
// 更新 Slider 的最大值为角色的最大生命值
slider.maxValue = myStats.GetMaxHealthValue();
// 将目标生命值更新为角色当前生命值
targetHealth = myStats.currentHealth;
}

// 翻转血条的UI(响应实体翻转事件)
private void FlipUI() => myTransform.Rotate(0, 180, 0);

// 当对象被禁用时,解绑事件以避免错误调用
private void OnDisable()
{
// 解绑实体翻转事件
entity.onFlipped -= FlipUI;
// 解绑生命值变化事件
myStats.onHealthChanged -= UpdateHealthUI;
}
}