美术更新

- detail页面修改 - ui布局修改
2025-08-25 20:15:42 +08:00
parent 2ae00f5c23
commit d6c3c775b5
183 changed files with 22192 additions and 12914 deletions
@@ -0,0 +1,66 @@
+# 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. 可以支持自定义动画路径和效果
@@ -0,0 +1,11 @@
+{
+  "ver": "1.0.1",
+  "importer": "text",
+  "imported": true,
+  "uuid": "2a018539-d24d-41e1-9b19-b84bc9787258",
+  "files": [
+    ".json"
+  ],
+  "subMetas": {},
+  "userData": {}
+}
@@ -0,0 +1,210 @@
+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();
+    }
+}
@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "ace67d75-a01f-49ec-aeb1-2e76cb041e46",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}