export enum ActivityPopupAnimationType { FadeScale = 0, Bounce = 1, } /** Parameters are shared by every caller. Scale is relative to the laid-out content. */ export const POPUP_ANIMATIONS = { fade: { duration: 0.25, start: 0.8, enter: "sineOut", exit: "sineIn" }, bounce: { // 如果觉得每段 0.1s 略慢,也可以设为 [0.12, 0.08, 0.06] 或统一 0.09 duration: 0.1, start: 0.5, // 初始/结束缩放 (1/2) overshoot: 16 / 15, // 约 1.067 (峰值放大) recoil: 14 / 15, // 约 0.933 (核心修复:不能为 1,必须小于 1 才有第 3 段回弹!) // 入场 1 -> 2 -> 3:冲到峰值(Out) -> 回落谷底(InOut) -> 归位到1(InOut) enter: ["quadOut", "sineInOut", "sineInOut"], // 退场 3 -> 2 -> 1(严格时间反演镜像):从1下蹲到谷底(InOut) -> 蓄力膨胀到峰值(InOut) -> 极速坍缩回0.5(In) exit: ["sineInOut", "sineInOut", "quadIn"], }, }; type Content = cc.Node | cc.Node[]; interface Pose { node: cc.Node; x: number; y: number; scaleX: number; scaleY: number; opacity: number; } interface Motion { poses: Pose[]; value: { scale: number; alpha: number }; tween: cc.Tween; direction: "open" | "close" | "closed"; grouped: boolean; } /** Content animation only. Callers own visibility, masks, input and business callbacks. * Sibling arrays behave as one content group around their parent's origin without * reparenting nodes (which would break existing prefab paths and event bindings). */ export default class ActivityPopupAnimator { private static motions = new WeakMap(); private static preparedOpacity = new WeakMap(); /** Hide immediately; capture layout only when the deferred entrance starts. */ static prepareOpen(content: Content): void { this.cancel(content); this.nodes(content).forEach(node => { this.preparedOpacity.set(node, node.opacity); node.opacity = 0; }); } /** A close/cancel before the scheduled entrance must not reopen the popup. */ static openPrepared(content: Content, type = ActivityPopupAnimationType.Bounce, done?: () => void): void { if (this.nodes(content).some(node => this.preparedOpacity.has(node))) this.open(content, type, done); } static open(content: Content, type = ActivityPopupAnimationType.Bounce, done?: () => void): void { this.play(content, type, false, done); } static close(content: Content, type = ActivityPopupAnimationType.Bounce, done?: () => void): void { this.play(content, type, true, done); } /** Call before relayout or disposing a view; never stops the view's own effects. */ static cancel(content: Content, restore = true): void { const nodes = this.nodes(content), key = nodes[0]; const motion = key && this.motions.get(key); if (motion) { if (motion.tween) motion.tween.stop(); this.motions.delete(key); if (restore) this.apply(motion, 1, 1); } nodes.forEach(node => { if (!this.preparedOpacity.has(node)) return; if (restore) node.opacity = this.preparedOpacity.get(node); this.preparedOpacity.delete(node); }); } private static nodes(content: Content): cc.Node[] { return (Array.isArray(content) ? content : [content]).filter(node => node && cc.isValid(node, true)); } private static apply(motion: Motion, scale: number, alpha: number): void { motion.poses.forEach(pose => { if (!cc.isValid(pose.node, true)) return; const node = pose.node; node.scaleX = pose.scaleX * scale; node.scaleY = pose.scaleY * scale; node.opacity = pose.opacity * alpha; if (motion.grouped) { node.x = pose.x * scale; node.y = pose.y * scale; } }); } private static play(content: Content, type: ActivityPopupAnimationType, closing: boolean, done?: () => void): void { const nodes = this.nodes(content), key = nodes[0]; if (!key) return; const prepared = nodes.some(node => this.preparedOpacity.has(node)); let motion = this.motions.get(key); if (closing && motion && motion.direction === "close") return; const interrupted = !!(motion && motion.tween); if (motion && motion.tween) motion.tween.stop(); if (!interrupted) { if (motion && motion.direction === "closed") this.apply(motion, 1, 1); motion = { poses: nodes.map(node => ({ node, x: node.x, y: node.y, scaleX: node.scaleX, scaleY: node.scaleY, opacity: this.preparedOpacity.has(node) ? this.preparedOpacity.get(node) : node.opacity })), value: { scale: 1, alpha: prepared ? 0 : 1 }, tween: null, direction: closing ? "close" : "open", grouped: Array.isArray(content), }; } nodes.forEach(node => this.preparedOpacity.delete(node)); motion.direction = closing ? "close" : "open"; this.motions.set(key, motion); const fade = type === ActivityPopupAnimationType.FadeScale; const config = POPUP_ANIMATIONS; if (!closing && !interrupted) { motion.value.scale = fade ? config.fade.start : config.bounce.start; motion.value.alpha = 0; } this.apply(motion, motion.value.scale, motion.value.alpha); const current = motion; let tween = cc.tween(motion.value); const onUpdate = () => { if (this.motions.get(key) === current && current.tween === tween) this.apply(current, current.value.scale, current.value.alpha); }; const opacity = { alpha: closing ? 0 : 1 }; const opacityOptions = { easing: closing ? config.fade.exit : config.fade.enter, onUpdate }; if (fade) { tween.to(config.fade.duration, { scale: closing ? config.fade.start : 1, ...opacity }, opacityOptions); } else { const b = config.bounce; // 入场:start(0.5) -> [1] overshoot(1.067) -> [2] recoil(0.933) -> [3] 1 // 退场:1 -> [3] recoil(0.933) -> [2] overshoot(1.067) -> [1] start(0.5) const scales = closing ? [b.recoil, b.overshoot, b.start] : [b.overshoot, b.recoil, 1]; const easings = closing ? b.exit : b.enter; const scaleTween = cc.tween(motion.value); scales.forEach((scale, index) => { scaleTween.to(b.duration, { scale }, { easing: easings[index], onUpdate }); }); // 透明度同样做成镜像对称: // 入场:在前 1~2 段(2 * b.duration)内淡入完毕,最后回弹阶段完全清晰 // 退场:前 1 段保持清晰,在后 2 段(膨胀到峰值并缩回 0.5 的过程)中同步淡出 const fadeDuration = b.duration * 2; const alphaTween = closing ? cc.tween(motion.value) .delay(b.duration) .to(fadeDuration, opacity, opacityOptions) : cc.tween(motion.value) .to(fadeDuration, opacity, opacityOptions); tween.parallel(scaleTween, alphaTween); } tween.call(() => { if (this.motions.get(key) !== current || current.tween !== tween || !cc.isValid(key, true)) return; this.apply(current, current.value.scale, current.value.alpha); current.tween = null; if (closing) current.direction = "closed"; else this.motions.delete(key); if (done) done(); }); motion.tween = tween; tween.start(); } }