'commit'

2025-09-09 07:33:51 +08:00
parent 7d704ca3b7
commit f6b05da402
3 changed files with 132 additions and 0 deletions
--- a/dsLightRag/XingJun/c9fc2122-9324-4e2b-9bae-ced575575eca-1.png
+++ b/dsLightRag/XingJun/c9fc2122-9324-4e2b-9bae-ced575575eca-1.png
--- a/dsLightRag/XingJun/animated_arrow.html
+++ b/dsLightRag/XingJun/animated_arrow.html
--- a/dsLightRag/XingJun/move.html
+++ b/dsLightRag/XingJun/move.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>箭头移动动画</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: #f0f0f0;
+        }
+        .background-container {
+            position: relative;
+            width: 100%;
+            height: 100vh;
+            background-image: url('background.png');
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: contain;
+        }
+        .arrow-container {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 600px;
+            height: 200px;
+            z-index: 999;
+        }
+        button {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            padding: 10px 20px;
+            font-size: 16px;
+            cursor: pointer;
+            z-index: 1000;
+        }
+    </style>
+</head>
+<body>
+    <div class="background-container">
+        <div class="arrow-container">
+            <!-- 简化的箭头SVG，确保可见 -->
+            <svg width="600" height="200" viewBox="0 0 600 200" xmlns="http://www.w3.org/2000/svg">
+            <!-- 左侧箭头 -->
+            <path id="outlineArrowLeft" 
+                  d="M 0 8.1 L 174 18 L 164 0 L 240 30 L 164 60 L 174 42 L 0 51.9 L 0 30 Z" 
+                  fill="red" 
+                  stroke="black" 
+                  stroke-width="2"/>
+            
+            <!-- 右侧箭头 -->
+            <path id="outlineArrowRight" 
+                  d="M 0 8.1 L 174 18 L 164 0 L 240 30 L 164 60 L 174 42 L 0 51.9 L 0 30 Z" 
+                  fill="red" 
+                  stroke="black" 
+                  stroke-width="2"/>
+            </svg>
+        </div>
+        <button id="startButton">开始移动</button>
+    </div>
+
+    <script>
+        // 简化的动画逻辑
+        // 获取DOM元素（确保只获取新箭头）
+        const arrowLeft = document.getElementById('outlineArrowLeft');
+        const arrowRight = document.getElementById('outlineArrowRight');
+        const startButton = document.getElementById('startButton');
+        let animationId = null;
+        let isAnimating = false;
+    
+        // 初始化箭头位置
+        arrowLeft.style.transform = 'translate(-100px, 0)';
+        // 调整右侧箭头初始位置，使其在SVG可见区域内
+        arrowRight.style.transform = 'translate(350px, 0) scale(-1, 1)';
+    
+        // 开始动画
+        function startAnimation() {
+            if (isAnimating) return;
+    
+            isAnimating = true;
+            startButton.disabled = true;
+            startButton.textContent = "移动中...";
+    
+            const duration = 2000; // 动画持续时间（毫秒）
+            const startTime = performance.now();
+            // 初始位置
+            const startLeft = -100;
+            // 右侧箭头初始位置调整为350px（原600px超出可见区域）
+            const startRight = 350;
+            // 目标位置
+            const endLeft = 0;
+            // 右侧箭头目标位置调整为250px
+            const endRight = 250;
+    
+            function animate(currentTime) {
+                const elapsedTime = currentTime - startTime;
+                const progress = Math.min(elapsedTime / duration, 1);
+    
+                // 计算当前位置
+                const currentLeft = startLeft + (endLeft - startLeft) * progress;
+                const currentRight = startRight + (endRight - startRight) * progress;
+    
+                // 更新箭头位置
+                arrowLeft.style.transform = `translate(${currentLeft}px, 0)`;
+                arrowRight.style.transform = `translate(${currentRight}px, 0) scale(-1, 1)`;
+    
+                if (progress < 1) {
+                    animationId = requestAnimationFrame(animate);
+                } else {
+                    // 动画完成
+                    isAnimating = false;
+                    startButton.disabled = false;
+                    startButton.textContent = "重新开始";
+                }
+            }
+    
+            animationId = requestAnimationFrame(animate);
+        }
+    
+        // 绑定按钮点击事件
+        startButton.addEventListener('click', startAnimation);
+    </script>
+</body>
+</html>