66 lines
1.8 KiB
Markdown
66 lines
1.8 KiB
Markdown
# 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. 可以支持自定义动画路径和效果 |