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?: Function
  ): void {
    if (!node || !node.isValid) {
      console.warn("UITransitionHelper: Invalid node for slideInFromRight");
      return;
    }

    const screenWidth = view.getVisibleSize().width;
    const targetPosition = new Vec3(0, 0, 0);

    // 设置初始位置为屏幕右侧外
    node.setPosition(screenWidth, 0, 0);

    // 执行滑入动画到屏幕中心
    tween(node)
      .to(
        duration,
        { position: targetPosition },
        {
          easing: "cubicOut",
        }
      )
      .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?: Function
  ): 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: "cubicOut",
        }
      )
      .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?: Function
  ): void {
    if (!node || !node.isValid) {
      console.warn("UITransitionHelper: Invalid node for slideInFromLeft");
      return;
    }

    const screenWidth = view.getVisibleSize().width;
    const targetPosition = new Vec3(0, 0, 0);

    // 设置初始位置为屏幕左侧外
    node.setPosition(-screenWidth, 0, 0);

    // 执行滑入动画到屏幕中心
    tween(node)
      .to(
        duration,
        { position: targetPosition },
        {
          easing: "cubicOut",
        }
      )
      .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?: Function
  ): 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: "cubicOut",
        }
      )
      .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();
  }
}