tanqiu/assets/scripts/FourUI/UpgradeSystem/UpgradeAni.ts

import { _decorator, Component, Node, tween, Vec3 } from 'cc';

const { ccclass, property } = _decorator;

/**
 * 升级面板动画控制器
 * 负责管理升级面板的显示和隐藏动画
 */
@ccclass('UpgradeAni')
export class UpgradeAni extends Component {
    
    /**
     * 显示面板动画
     * 面板从小到大的缩放动画，从屏幕中央弹出
     */
    public showPanel(): Promise<void> {
        return new Promise((resolve) => {
            // 设置初始状态：缩小到0，位置居中
            this.node.setScale(Vec3.ZERO);
            this.node.setPosition(0, 0, 0); // 确保面板在屏幕正中间
            this.node.active = true;
            
            // 缩放动画：从0放大到1
            tween(this.node)
                .to(0.3, { scale: new Vec3(1, 1, 1) }, {
                    easing: 'backOut' // 使用回弹缓动效果
                })
                .call(() => {
                    resolve();
                })
                .start();
        });
    }
    
    /**
     * 隐藏面板动画
     * 面板从大到小的缩放动画
     */
    public hidePanel(): Promise<void> {
        return new Promise((resolve) => {
            // 缩放动画：从1缩小到0
            tween(this.node)
                .to(0.2, { scale: Vec3.ZERO }, {
                    easing: 'backIn' // 使用回弹缓动效果
                })
                .call(() => {
                    this.node.active = false;
                    resolve();
                })
                .start();
        });
    }
    
    /**
     * 立即隐藏面板（无动画）
     */
    public hidePanelImmediate(): void {
        this.node.setScale(Vec3.ZERO);
        this.node.active = false;
    }
    
    /**
     * 立即显示面板（无动画）
     */
    public showPanelImmediate(): void {
        this.node.setScale(Vec3.ONE);
        this.node.setPosition(0, 0, 0); // 确保面板在屏幕正中间
        this.node.active = true;
    }
}