# UI过渡动画实现说明

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

## 核心文件

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

### 2. NavigationManager.ts
- 新增了`navigateToChatWithTransition()`方法
- 处理双面板的动画同步
- 管理动画完成后的面板关闭逻辑

### 3. 面板修改
- **GirlDetailPanel**: 修改`OnClickChatBtn()`调用新的过渡方法
- **ChatPanel**: 修改`openUIDataCT()`支持滑入动画参数

## 使用方法

### 基本用法
```typescript
// 从GirlDetailPanel跳转到ChatPanel（带动画）
NavigationManager.Instance.navigateToChatWithTransition(roleId, this);
```

### 单独使用动画工具类
```typescript
// 滑入动画
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. 可以支持自定义动画路径和效果