18xchat/assets/Scripts/chat18x/utils/README_UITransition.md

UI过渡动画实现说明

功能概述

实现了从GirlDetailPanel到ChatPanel的平滑过渡动画效果。当用户点击聊天按钮时，GirlDetailPanel会向左滑出，同时ChatPanel从右侧滑入。

核心文件

1. UITransitionHelper.ts

• 封装了常用的UI过渡动画方法
• 提供滑入滑出、淡入淡出等动画效果
• 支持自定义动画时长和回调函数

2. NavigationManager.ts

• 新增了navigateToChatWithTransition()方法
• 处理双面板的动画同步
• 管理动画完成后的面板关闭逻辑

3. 面板修改

• GirlDetailPanel: 修改OnClickChatBtn()调用新的过渡方法
• ChatPanel: 修改openUIDataCT()支持滑入动画参数

使用方法

基本用法

// 从GirlDetailPanel跳转到ChatPanel（带动画）
NavigationManager.Instance.navigateToChatWithTransition(roleId, this);

单独使用动画工具类

// 滑入动画
UITransitionHelper.slideInFromRight(node, 0.3, callback);

// 滑出动画
UITransitionHelper.slideOutToLeft(node, 0.3, callback);

// 淡入淡出
UITransitionHelper.fadeIn(node, 0.3, callback);
UITransitionHelper.fadeOut(node, 0.3, callback);

动画参数

• 动画时长: 默认0.3秒，可自定义
• 缓动函数: 使用quartOut提供平滑的减速效果
• 动画距离: 基于屏幕宽度计算

兼容性说明

• 新的过渡方法完全向后兼容
• 原有的navigateToChat()方法保持不变
• ChatPanel的数据处理支持新旧两种格式

性能优化

• 动画前进行节点有效性检查
• 延迟执行确保节点已正确加载
• 动画完成后立即释放资源

扩展建议

1. 可以为其他页面切换添加类似的过渡效果
2. 可以根据不同场景使用不同的动画类型
3. 可以添加更多的缓动函数选项
4. 可以支持自定义动画路径和效果