'commit'
This commit is contained in:
4
dsLightRag/XingJun/Arraw.svg
Normal file
4
dsLightRag/XingJun/Arraw.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Do not edit this file with editors other than draw.io -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="background: transparent; background-color: transparent; color-scheme: light dark;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="241px" height="61px" viewBox="-0.5 -0.5 241 61" content="<mxfile host="Electron" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/28.1.2 Chrome/138.0.7204.243 Electron/37.4.0 Safari/537.36" version="28.1.2" scale="1" border="0"> <diagram name="第 1 页" id="Ju8HBPQ0NuOidMe9okl8"> <mxGraphModel dx="1426" dy="841" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0"> <root> <mxCell id="0" /> <mxCell id="1" parent="0" /> <mxCell id="5g9AZhaBOiL0pv-xpRXJ-1" value="" style="html=1;shadow=0;dashed=0;align=center;verticalAlign=middle;shape=mxgraph.arrows2.stylisedArrow;dy=0.6;dx=66;notch=0;feather=0.27;" vertex="1" parent="1"> <mxGeometry x="140" y="390" width="240" height="60" as="geometry" /> </mxCell> </root> </mxGraphModel> </diagram> </mxfile> "><defs/><g><g data-cell-id="0"><g data-cell-id="1"><g data-cell-id="5g9AZhaBOiL0pv-xpRXJ-1"><g><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" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all" style="fill: light-dark(#ffffff, var(--ge-dark-color, #121212)); stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/></g></g></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
113
dsLightRag/XingJun/animated_arrow.html
Normal file
113
dsLightRag/XingJun/animated_arrow.html
Normal file
@@ -0,0 +1,113 @@
|
||||
<!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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.container {
|
||||
text-align: center;
|
||||
}
|
||||
button {
|
||||
margin-top: 20px;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
button:disabled {
|
||||
background-color: #cccccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
</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">
|
||||
<!-- 定义裁剪路径，用于限制填充区域为箭头形状 -->
|
||||
<defs>
|
||||
<clipPath id="arrowClipPath">
|
||||
<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>
|
||||
</defs>
|
||||
|
||||
<!-- 背景箭头轮廓 - 保持不变 -->
|
||||
<path id="outlineArrow"
|
||||
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"
|
||||
x="0" y="0" width="0" height="61"
|
||||
fill="red"
|
||||
clip-path="url(#arrowClipPath)"/>
|
||||
</svg>
|
||||
|
||||
<button id="startButton">开始填充</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 获取DOM元素
|
||||
const fillAnimation = document.getElementById('fillAnimation');
|
||||
const startButton = document.getElementById('startButton');
|
||||
let animationId = null;
|
||||
let isAnimating = false;
|
||||
|
||||
// 开始填充动画
|
||||
function startFillAnimation() {
|
||||
if (isAnimating) return;
|
||||
|
||||
isAnimating = true;
|
||||
startButton.disabled = true;
|
||||
startButton.textContent = "填充中...";
|
||||
|
||||
const duration = 2000; // 动画持续时间（毫秒）
|
||||
const startTime = performance.now();
|
||||
const startWidth = 0;
|
||||
const endWidth = 241; // 箭头的总宽度
|
||||
|
||||
function animate(currentTime) {
|
||||
const elapsedTime = currentTime - startTime;
|
||||
const progress = Math.min(elapsedTime / duration, 1);
|
||||
|
||||
// 计算当前的填充宽度，从0逐渐变为241
|
||||
const currentWidth = startWidth + (endWidth - startWidth) * progress;
|
||||
fillAnimation.setAttribute('width', currentWidth);
|
||||
|
||||
if (progress < 1) {
|
||||
animationId = requestAnimationFrame(animate);
|
||||
} else {
|
||||
// 动画完成
|
||||
isAnimating = false;
|
||||
startButton.disabled = false;
|
||||
startButton.textContent = "重新填充";
|
||||
}
|
||||
}
|
||||
|
||||
animationId = requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
// 绑定按钮点击事件
|
||||
startButton.addEventListener('click', startFillAnimation);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,6 +0,0 @@
|
||||
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Layer_1">
|
||||
<title>Layer 1</title>
|
||||
<path id="svg_1" d="m216.91503,274.91109c0.26021,-11.6278 -0.1665,-23.27113 2.13988,-34.87848c56.67197,3.81831 112.67554,10.06601 168.39255,15.68451c2.99113,-5.70158 1.58328,-10.4311 4.18213,-15.70261c35.79493,11.0927 71.2671,22.34337 105.28547,34.12978c-32.63733,13.36985 -70.07352,24.98065 -106.82583,36.87022c-1.19012,-5.5368 -2.38046,-11.07356 -3.5706,-16.61037c-54.1675,5.3566 -111.45142,10.8948 -165.96914,15.79176c-3.70747,-11.29953 -3.5985,-23.60505 -3.63446,-35.28482z" stroke="#000" fill="#CE7975"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 633 B |
@@ -1 +0,0 @@
|
||||
https://editor.method.ac/
|
||||
Reference in New Issue
Block a user