笔记五 ：EgretH5通用MVC框架的入门操作：人物角色的渐动血条（UI部分）

你提到的问题是点击两次扣血之后，再次点击加血时，缓动的血条会直接消失。这是因为每次点击都会立即更新血条的状态，并清除之前的动画。为了解决这个问题，可以在点击加血或扣血时，先计算出需要的时间，并在时间结束后再进行更新。

以下是一个改进的解决方案：

1. 使用一个变量来存储当前的血条状态和目标状态。
2. 在每次点击时，更新这个变量，并启动一个定时器来处理缓动效果。
3. 在定时器结束时，应用新的血条状态。

以下是修改后的代码示例：

class HealthBar { private fastHpRect: egret.DisplayObject; private lowHpRect: egret.DisplayObject; private currentHealth: number = 1; // 当前血量 private targetHealth: number = 1; // 目标血量 private healthChangeSpeed: number = 0.2; // 血条变化速度 constructor(fastHpRect: egret.DisplayObject, lowHpRect: egret.DisplayObject) { this.fastHpRect = fastHpRect; this.lowHpRect = lowHpRect; this.updateHealthBar(); } private updateHealthBar(): void { if (this.currentHealth !== this.targetHealth) { const tween = egret.Tween.get(this.fastHpRect).to({ scaleX: this.currentHealth }, 0); tween.to({ scaleX: this.targetHealth }, 1200); tween.call(() => { this.currentHealth = this.targetHealth; this.updateHealthBar(); }); } } public addHealth(amount: number): void { if (this.currentHealth + amount <= 1) { this.targetHealth += amount; this.updateHealthBar(); } } public subtractHealth(amount: number): void { if (this.currentHealth - amount >= 0) { this.targetHealth -= amount; this.updateHealthBar(); } } } 

在这个示例中，updateHealthBar 方法会在每次点击时更新血条状态，并启动一个定时器来处理缓动效果。如果当前血量和目标血量不一致，则会启动一个缓动动画，直到达到目标血量。

这样可以确保在多次点击加血或扣血时，缓动效果不会被直接清除，而是会在预定时间内完成。