From 7d704ca3b7ce72a1cdd270e116c94e40ae5037b9 Mon Sep 17 00:00:00 2001
From: HuangHai <10402852@qq.com>
Date: Tue, 9 Sep 2025 07:17:39 +0800
Subject: [PATCH] 'commit'

---
 dsLightRag/XingJun/animated_arrow.html | 47 ++++++++++++++++++++------
 1 file changed, 37 insertions(+), 10 deletions(-)
diff --git a/dsLightRag/XingJun/animated_arrow.html b/dsLightRag/XingJun/animated_arrow.html
index dd6613b7..496ef56c 100644
--- a/dsLightRag/XingJun/animated_arrow.html
+++ b/dsLightRag/XingJun/animated_arrow.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>箭头填充动画</title>
+    <title>双箭头填充动画</title>
     <style>
         body {
             display: flex;
@@ -38,28 +38,51 @@
 </head>
 <body>
     <div class="container">
-        <h1>箭头填充动画演示</h1>
-        <!-- 使用clipPath实现真正的内部填充动画 -->
-        <svg xmlns="http://www.w3.org/2000/svg" width="241px" height="61px" viewBox="-0.5 -0.5 241 61">
+        <h1>双箭头填充动画演示</h1>
+        <!-- 扩展SVG尺寸以容纳两个相对的箭头 -->
+        <svg xmlns="http://www.w3.org/2000/svg" width="500px" height="61px" viewBox="-0.5 -0.5 500 61">
             <!-- 定义裁剪路径，用于限制填充区域为箭头形状 -->
             <defs>
-                <clipPath id="arrowClipPath">
+                <!-- 从左到右箭头的裁剪路径 -->
+                <clipPath id="arrowClipPathLeft">
                     <path 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" />
                 </clipPath>
+                
+                <!-- 从右到左箭头的裁剪路径 -->
+                <clipPath id="arrowClipPathRight">
+                    <path d="M 240 8.1 L 66 18 L 76 0 L 0 30 L 76 60 L 66 42 L 240 51.9 L 240 30 Z" />
+                </clipPath>
             </defs>
             
+            <!-- 左侧箭头：从左到右 -->
             <!-- 背景箭头轮廓 - 保持不变 -->
-            <path id="outlineArrow" 
+            <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="white" 
                   stroke="black" 
                   stroke-width="2"/>
             
             <!-- 填充层 - 使用裁剪路径限制填充范围 -->
-            <rect id="fillAnimation" 
+            <rect id="fillAnimationLeft" 
                   x="0" y="0" width="0" height="61" 
                   fill="red" 
-                  clip-path="url(#arrowClipPath)"/>
+                  clip-path="url(#arrowClipPathLeft)"/>
+            
+            <!-- 右侧箭头：从右到左 (通过平移和水平翻转实现) -->
+            <!-- 背景箭头轮廓 - 保持不变 -->
+            <g transform="translate(500, 0) scale(-1, 1)">
+                <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="white" 
+                      stroke="black" 
+                      stroke-width="2"/>
+                
+                <!-- 填充层 - 使用裁剪路径限制填充范围 -->
+                <rect id="fillAnimationRight" 
+                      x="0" y="0" width="0" height="61" 
+                      fill="red" 
+                      clip-path="url(#arrowClipPathLeft)"/>
+            </g>
         </svg>
         
         <button id="startButton">开始填充</button>
@@ -67,7 +90,8 @@
     
     <script>
         // 获取DOM元素
-        const fillAnimation = document.getElementById('fillAnimation');
+        const fillAnimationLeft = document.getElementById('fillAnimationLeft');
+        const fillAnimationRight = document.getElementById('fillAnimationRight');
         const startButton = document.getElementById('startButton');
         let animationId = null;
         let isAnimating = false;
@@ -91,7 +115,10 @@
                 
                 // 计算当前的填充宽度，从0逐渐变为241
                 const currentWidth = startWidth + (endWidth - startWidth) * progress;
-                fillAnimation.setAttribute('width', currentWidth);
+                
+                // 同时更新两个箭头的填充宽度
+                fillAnimationLeft.setAttribute('width', currentWidth);
+                fillAnimationRight.setAttribute('width', currentWidth);
                 
                 if (progress < 1) {
                     animationId = requestAnimationFrame(animate);
