18xchat/assets/Scripts/chat18x/utils/UITransitionHelper.ts

import { _decorator, Node, tween, Vec3, UITransform, view } from "cc";

const { ccclass, property } = _decorator;

/**
 * UI过渡动画帮助类
 * 
 * 提供常用的UI过渡动画效果，如滑入滑出等
 * 
 * @author AI Chat System
 * @version 1.0.0
 */
@ccclass("UITransitionHelper")
export class UITransitionHelper {

    /**
     * 让节点从右侧滑入到原位置
     * 
     * @param {Node} node - 要执行动画的节点
     * @param {number} duration - 动画持续时间（秒），默认0.3秒
     * @param {Function} callback - 动画完成后的回调函数
     */
    public static slideInFromRight(node: Node, duration: number = 0.3, callback?: () => void): void {
        if (!node || !node.isValid) {
            console.warn("UITransitionHelper: Invalid node for slideInFromRight");
            return;
        }

        const screenWidth = view.getVisibleSize().width;
        const originalPosition = node.getPosition();
        
        // 设置初始位置为屏幕右侧外
        node.setPosition(screenWidth, originalPosition.y, originalPosition.z);
        
        // 执行滑入动画
        tween(node)
            .to(duration, { position: originalPosition }, {
                easing: 'quartOut'
            })
            .call(() => {
                if (callback) {
                    callback();
                }
            })
            .start();
    }

    /**
     * 让节点向左滑出到屏幕外
     * 
     * @param {Node} node - 要执行动画的节点
     * @param {number} duration - 动画持续时间（秒），默认0.3秒
     * @param {Function} callback - 动画完成后的回调函数
     */
    public static slideOutToLeft(node: Node, duration: number = 0.3, callback?: () => void): void {
        if (!node || !node.isValid) {
            console.warn("UITransitionHelper: Invalid node for slideOutToLeft");
            return;
        }

        const screenWidth = view.getVisibleSize().width;
        const currentPosition = node.getPosition();
        const targetPosition = new Vec3(-screenWidth, currentPosition.y, currentPosition.z);
        
        // 执行滑出动画
        tween(node)
            .to(duration, { position: targetPosition }, {
                easing: 'quartOut'
            })
            .call(() => {
                if (callback) {
                    callback();
                }
            })
            .start();
    }

    /**
     * 让节点从左侧滑入到原位置
     * 
     * @param {Node} node - 要执行动画的节点
     * @param {number} duration - 动画持续时间（秒），默认0.3秒
     * @param {Function} callback - 动画完成后的回调函数
     */
    public static slideInFromLeft(node: Node, duration: number = 0.3, callback?: () => void): void {
        if (!node || !node.isValid) {
            console.warn("UITransitionHelper: Invalid node for slideInFromLeft");
            return;
        }

        const screenWidth = view.getVisibleSize().width;
        const originalPosition = node.getPosition();
        
        // 设置初始位置为屏幕左侧外
        node.setPosition(-screenWidth, originalPosition.y, originalPosition.z);
        
        // 执行滑入动画
        tween(node)
            .to(duration, { position: originalPosition }, {
                easing: 'quartOut'
            })
            .call(() => {
                if (callback) {
                    callback();
                }
            })
            .start();
    }

    /**
     * 让节点向右滑出到屏幕外
     * 
     * @param {Node} node - 要执行动画的节点
     * @param {number} duration - 动画持续时间（秒），默认0.3秒
     * @param {Function} callback - 动画完成后的回调函数
     */
    public static slideOutToRight(node: Node, duration: number = 0.3, callback?: () => void): void {
        if (!node || !node.isValid) {
            console.warn("UITransitionHelper: Invalid node for slideOutToRight");
            return;
        }

        const screenWidth = view.getVisibleSize().width;
        const currentPosition = node.getPosition();
        const targetPosition = new Vec3(screenWidth, currentPosition.y, currentPosition.z);
        
        // 执行滑出动画
        tween(node)
            .to(duration, { position: targetPosition }, {
                easing: 'quartOut'
            })
            .call(() => {
                if (callback) {
                    callback();
                }
            })
            .start();
    }

    /**
     * 淡入动画
     * 
     * @param {Node} node - 要执行动画的节点
     * @param {number} duration - 动画持续时间（秒），默认0.3秒
     * @param {Function} callback - 动画完成后的回调函数
     */
    public static fadeIn(node: Node, duration: number = 0.3, callback?: () => void): void {
        if (!node || !node.isValid) {
            console.warn("UITransitionHelper: Invalid node for fadeIn");
            return;
        }

        // 设置初始透明度为0
        if (node.setOpacity) {
            node.setOpacity(0);
        }
        
        // 执行淡入动画
        tween(node)
            .to(duration, { opacity: 255 }, {
                easing: 'quartOut'
            })
            .call(() => {
                if (callback) {
                    callback();
                }
            })
            .start();
    }

    /**
     * 淡出动画
     * 
     * @param {Node} node - 要执行动画的节点
     * @param {number} duration - 动画持续时间（秒），默认0.3秒
     * @param {Function} callback - 动画完成后的回调函数
     */
    public static fadeOut(node: Node, duration: number = 0.3, callback?: () => void): void {
        if (!node || !node.isValid) {
            console.warn("UITransitionHelper: Invalid node for fadeOut");
            return;
        }
        
        // 执行淡出动画
        tween(node)
            .to(duration, { opacity: 0 }, {
                easing: 'quartOut'
            })
            .call(() => {
                if (callback) {
                    callback();
                }
            })
            .start();
    }

    /**
     * 停止节点上的所有动画
     * 
     * @param {Node} node - 要停止动画的节点
     */
    public static stopAllTweens(node: Node): void {
        if (!node || !node.isValid) {
            console.warn("UITransitionHelper: Invalid node for stopAllTweens");
            return;
        }

        tween(node).stop();
    }
}