添加扫描线效果

assets/Scenes/MainScene.scene

@@ -9034,6 +9034,12 @@
     "hintLabel": {
       "__id__": 253
     },
+    "scanFrame": {
+      "__id__": 259
+    },
+    "scanLine": {
+      "__id__": 262
+    },
     "_id": "db1PnBVw9B4aGfs7DQSGy+"
   },
   {

assets/scripts/LieDetectorManager.ts

@@ -1,4 +1,4 @@
-import { _decorator, Component, Node, Button, Sprite, SpriteFrame, resources } from 'cc';
+import { _decorator, Component, Node, Button, Sprite, SpriteFrame, resources, Animation, Tween, tween, Vec3, UITransform } from 'cc';
 const { ccclass, property } = _decorator;
 
 /**
@@ -48,8 +48,22 @@ export class LieDetectorManager extends Component {
     })
     hintLabel: Node = null;
     
+    @property({
+        type: Node,
+        tooltip: '扫描框节点'
+    })
+    scanFrame: Node = null;
+    
+    @property({
+        type: Node,
+        tooltip: '扫描线节点'
+    })
+    scanLine: Node = null;
+    
     // 当前角色是否为伪装者
     private isCharacterFake: boolean = false;
+    // 是否正在扫描中
+    private isScanning: boolean = false;
     
     start() {
         // 初始化隐藏面板
@@ -60,6 +74,9 @@ export class LieDetectorManager extends Component {
         // 隐藏结果
         this.hideResult();
         
+        // 隐藏扫描元素
+        this.hideScanElements();
+        
         // 注册按钮事件
         this.setupButtons();
     }
@@ -74,7 +91,7 @@ export class LieDetectorManager extends Component {
         
         // 测谎按钮
         if (this.detectButton) {
-            this.detectButton.node.on(Button.EventType.CLICK, this.detectLie, this);
+            this.detectButton.node.on(Button.EventType.CLICK, this.startScanProcess, this);
         } else {
             console.error('测谎按钮未设置');
         }
@@ -101,6 +118,8 @@ export class LieDetectorManager extends Component {
             this.lieDetectorPanel.setSiblingIndex(999); // 确保显示在最前面
             // 初始隐藏结果
             this.hideResult();
+            // 隐藏扫描元素
+            this.hideScanElements();
             // 显示提示信息
             this.showHint();
         } else {
@@ -114,9 +133,117 @@ export class LieDetectorManager extends Component {
     public hideLieDetectorPanel() {
         if (this.lieDetectorPanel) {
             this.lieDetectorPanel.active = false;
+            // 如果正在扫描，停止扫描
+            this.isScanning = false;
         }
     }
     
+    /**
+     * 开始扫描流程
+     */
+    private startScanProcess() {
+        // 如果正在扫描中，不做处理
+        if (this.isScanning) {
+            return;
+        }
+        
+        // 开始扫描
+        this.isScanning = true;
+        
+        // 确保结果隐藏
+        this.hideResult();
+        
+        // 隐藏提示信息
+        this.hideHint();
+        
+        // 显示扫描元素
+        this.showScanElements();
+        
+        // 执行扫描动画
+        this.playScanAnimation();
+    }
+    
+    /**
+     * 显示扫描元素
+     */
+    private showScanElements() {
+        if (this.scanFrame) {
+            this.scanFrame.active = true;
+        }
+        
+        if (this.scanLine && this.scanFrame) {
+            this.scanLine.active = true;
+            // 获取扫描框的UITransform组件
+            const scanFrameTransform = this.scanFrame.getComponent(UITransform);
+            if (scanFrameTransform) {
+                // 重置扫描线位置到顶部
+                this.scanLine.setPosition(this.scanLine.position.x, this.scanFrame.position.y + scanFrameTransform.height / 2, 0);
+            }
+        }
+    }
+    
+    /**
+     * 隐藏扫描元素
+     */
+    private hideScanElements() {
+        if (this.scanFrame) {
+            this.scanFrame.active = false;
+        }
+        
+        if (this.scanLine) {
+            this.scanLine.active = false;
+        }
+    }
+    
+    /**
+     * 播放扫描动画
+     */
+    private playScanAnimation() {
+        if (!this.scanLine || !this.scanFrame) {
+            console.error('扫描线或扫描框未设置');
+            this.detectLie(); // 直接显示结果
+            return;
+        }
+        
+        // 获取扫描框的UITransform组件
+        const scanFrameTransform = this.scanFrame.getComponent(UITransform);
+        if (!scanFrameTransform) {
+            console.error('扫描框缺少UITransform组件');
+            this.detectLie(); // 直接显示结果
+            return;
+        }
+        
+        // 禁用测谎按钮，避免重复点击
+        if (this.detectButton) {
+            this.detectButton.interactable = false;
+        }
+        
+        // 设置初始位置（顶部）
+        const startY = this.scanFrame.position.y + scanFrameTransform.height / 2;
+        const endY = this.scanFrame.position.y - scanFrameTransform.height / 2;
+        
+        this.scanLine.setPosition(this.scanLine.position.x, startY, 0);
+        
+        // 创建扫描动画（从上到下移动）
+        tween(this.scanLine)
+            .to(1.5, { position: new Vec3(this.scanLine.position.x, endY, 0) }, {
+                easing: 'sineInOut',
+            })
+            .call(() => {
+                // 扫描完成后显示结果
+                this.hideScanElements();
+                this.detectLie();
+                
+                // 重新启用测谎按钮
+                if (this.detectButton) {
+                    this.detectButton.interactable = true;
+                }
+                
+                this.isScanning = false;
+            })
+            .start();
+    }
+    
     /**
      * 执行测谎操作
      */
@@ -133,9 +260,6 @@ export class LieDetectorManager extends Component {
             
             this.resultDisplay.node.active = true;
         }
-        
-        // 隐藏提示信息
-        this.hideHint();
     }
     
     /**
@@ -172,7 +296,7 @@ export class LieDetectorManager extends Component {
         }
         
         if (this.detectButton) {
-            this.detectButton.node.off(Button.EventType.CLICK, this.detectLie, this);
+            this.detectButton.node.off(Button.EventType.CLICK, this.startScanProcess, this);
         }
     }
 }