huanghai/dsProject
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'commit'

Browse Source
This commit is contained in:
HuangHai
2025-09-09 07:17:39 +08:00
parent 813eaeb432
commit 7d704ca3b7
1 changed files with 37 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
dsLightRag/XingJun/animated_arrow.html
View File

@@ -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);