tanqiu/assets/scripts/Animations/HPBarAnimation.ts

import { _decorator, Component, Node, ProgressBar,  tween } from 'cc';
const { ccclass, property } = _decorator;

/**
 * 血条动画组件
 * 使用两个重叠的血条实现黄色血皮滑动动画效果
 * 红色血条显示当前血量，黄色血条用于滑动动画
 */
@ccclass('HPBarAnimation')
export class HPBarAnimation extends Component {
    
    @property({
        type: Node,
        tooltip: '红色血条节点'
    })
    public redBarNode: Node = null;
    
    @property({
        type: Node,
        tooltip: '黄色血条节点'
    })
    public yellowBarNode: Node = null;
    
    private redProgressBar: ProgressBar = null;
    private yellowProgressBar: ProgressBar = null;
    private currentProgress: number = 1.0;
    private targetProgress: number = 1.0;
    
    start() {
        this.initializeComponents();
    }
    
    /**
     * 初始化组件
     */
    private initializeComponents() {
        // 获取组件所属的敌人节点信息
        const enemyNode = this.node;
        const enemyName = enemyNode ? enemyNode.name : 'Unknown';
     
        // 获取红色血条组件
        if (this.redBarNode) {
            console.log(`[HPBarAnimation] [${enemyName}] 红色血条节点已设置:`, this.redBarNode.name);
            this.redProgressBar = this.redBarNode.getComponent(ProgressBar);
            if (this.redProgressBar) {
                this.currentProgress = this.redProgressBar.progress;
                this.targetProgress = this.currentProgress;
                console.log(`[HPBarAnimation] [${enemyName}] 红色血条组件初始化成功，当前进度:`, this.currentProgress);
            } else {
                console.error(`[HPBarAnimation] [${enemyName}] 红色血条节点上未找到ProgressBar组件!`);
            }
        } else {
            console.error(`[HPBarAnimation] [${enemyName}] 红色血条节点未设置!`);
        }
        
        // 获取黄色血条组件
        if (this.yellowBarNode) {
            console.log(`[HPBarAnimation] [${enemyName}] 黄色血条节点已设置:`, this.yellowBarNode.name);
            this.yellowProgressBar = this.yellowBarNode.getComponent(ProgressBar);
            if (this.yellowProgressBar) {
                // 黄色血条初始进度与红色血条同步
                this.yellowProgressBar.progress = this.currentProgress;
            } else {
                console.error(`[HPBarAnimation] [${enemyName}] 黄色血条节点上未找到ProgressBar组件!`);
            }
        } else {
            console.error(`[HPBarAnimation] [${enemyName}] 黄色血条节点未设置!`);
        }
    }
    
    /**
     * 获取节点路径
     */
    private getNodePath(node: Node): string {
        if (!node) return 'null';
        let path = node.name;
        let current = node;
        
        while (current.parent) {
            current = current.parent;
            path = current.name + '/' + path;
        }
        
        return path;
    }
    

    
    /**
     * 更新血条显示
     */
    private updateBarDisplay() {
        if (!this.redProgressBar || !this.yellowProgressBar) {
            return;
        }
        
        // 红色血条显示当前血量
        if (this.redProgressBar && this.redProgressBar.isValid) {
            this.redProgressBar.progress = this.currentProgress;
        }
    }
    
    /**
     * 更新血条进度并播放动画
     * @param newProgress 新的血量百分比 (0-1)
     */
    public updateProgress(newProgress: number) {
        const enemyName = this.node ? this.node.name : 'Unknown';
        
        if (!this.redProgressBar || !this.yellowProgressBar) {
            console.warn(`[HPBarAnimation] [${enemyName}] 红色或黄色血条组件未初始化`);
            return;
        }
        
        // 限制进度范围
        newProgress = Math.max(0, Math.min(1, newProgress));
        
        // 如果血量增加或没有变化，直接更新
        if (newProgress >= this.currentProgress) {
            this.currentProgress = newProgress;
            this.targetProgress = newProgress;
            // 同步更新两个血条
            if (this.redProgressBar && this.redProgressBar.isValid) {
                this.redProgressBar.progress = newProgress;
            }
            if (this.yellowProgressBar && this.yellowProgressBar.isValid) {
                this.yellowProgressBar.progress = newProgress;
            }
            this.updateBarDisplay();
            return;
        }
        
        // 血量减少时播放黄色血皮滑动动画
        this.playDamageAnimation(newProgress);
    }
    
    /**
     * 播放伤害动画
     * @param newProgress 新的血量百分比
     */
    private playDamageAnimation(newProgress: number) {
        console.log(`[HPBarAnimation] 开始播放伤害动画：${this.currentProgress} -> ${newProgress}`);
        
        this.targetProgress = newProgress;
        
        // 保存原始血量作为黄色血条起始位置
        const originalProgress = this.currentProgress;
        
        // 1. 立即更新红色血条到新的血量值
        this.currentProgress = newProgress;
        if (this.redProgressBar && this.redProgressBar.isValid) {
            this.redProgressBar.progress = newProgress;
        }
        
        // 2. 黄色血条从原血量滑动到新血量位置        
        // 黄色血条保持在原始位置
        if (this.yellowProgressBar && this.yellowProgressBar.isValid) {
            this.yellowProgressBar.progress = originalProgress;
        }
        this.updateBarDisplay();
        
        // 创建滑动动画，先暂停0.4秒再滑动
        tween({ progress: originalProgress })
            .delay(0.4) // 暂停0.4秒
            .to(0.6, { progress: newProgress }, {
                onUpdate: (target) => {
                    // 动画过程中更新黄色血条进度
                    if (this.yellowProgressBar && this.yellowProgressBar.isValid) {
                        this.yellowProgressBar.progress = target.progress;
                        this.updateBarDisplay();
                    }
                },
                onComplete: () => {
                    // 动画完成后黄色血条进度等于当前血量
                    if (this.yellowProgressBar && this.yellowProgressBar.isValid) {
                        this.yellowProgressBar.progress = newProgress;
                        this.updateBarDisplay();
                    }
                }
            })
            .start();
    }
    
    /**
     * 获取当前血量百分比
     */
    public getCurrentProgress(): number {
        return this.currentProgress;
    }
    
    /**
     * 重置血条到满血状态
     */
    public resetToFull() {
        this.updateProgress(1.0);
    }
    
    onDestroy() {
    }
}