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 extends UIView { @property(UIOpacity) popupMask: UIOpacity; @property(Node) popupRoot: Node; private maskTween: Tween; private rootTween: Tween; internalCreate() { 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 { this.openAnimation(); await super.internalOpen(params); } protected openAnimation(): void | Promise { 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(); } }