game_cocos_2c/assets/scripts/framework/ui/UIPopup.ts

import { _decorator, Tween, tween, UIOpacity, Node, Vec3, easing, Sprite, color } from 'cc';
import { UIView } from './UIView';
import { UICloseReason } from './UILayer';
import { waitForSeconds } from '@scripts/utils/Helper';

const { ccclass, property } = _decorator;

const TWEEM_TIMES = 0.3;
const TWEEN_TIMES_END = 0.2;

@ccclass('UIPopup')
export class UIPopup<TParams = unknown> extends UIView<TParams> {
    @property(UIOpacity)
    popupMask: UIOpacity;

    @property(Node)
    popupRoot: Node;

    private maskTween: Tween;
    private rootTween: Tween;

    internalCreate(): Promise<void> {
        const sptMask = this.popupMask.getComponent(Sprite);
        if (sptMask) sptMask.color = color(0, 0, 0, 191);

        if (this.popupMask) this.popupMask.opacity = 0;
        if (this.popupRoot) this.popupRoot.scale = Vec3.ZERO;

        return super.internalCreate();
    }

    async internalOpen(params: TParams): Promise<void> {
        this.openAnimation();
        await super.internalOpen(params);
    }


    protected openAnimation(): void | Promise<void> {
        if (this.popupMask) {
            this.stopTween(this.maskTween);

            this.popupMask.opacity = 0;
            this.maskTween = tween(this.popupMask)
                .to(TWEEM_TIMES * 0.6, { opacity: 255 })
                .start();
        }

        if (this.popupRoot) {
            this.stopTween(this.rootTween);
            this.popupRoot.scale = Vec3.ZERO;
            this.rootTween = tween(this.popupRoot)
                .to(TWEEM_TIMES, { scale: Vec3.ONE }, { easing: 'backOut' })
                .start();
        }
    }

    protected async onClose(_reason: UICloseReason) {
        if (!this.popupMask && !this.popupRoot) return;

        this.stopTween(this.maskTween);
        this.stopTween(this.rootTween);

        if (this.popupMask) {
            this.maskTween = tween(this.popupMask)
                .to(TWEEN_TIMES_END, { opacity: 0 })
                .start();
        }

        if (this.popupRoot) {
            this.rootTween = tween(this.popupRoot)
                .to(TWEEN_TIMES_END, { scale: Vec3.ZERO })
                .start();
        }

        await waitForSeconds(TWEEN_TIMES_END);
    }

    private stopTween(tweener: Tween) {
        if (tweener) tweener.stop();
    }
}