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:33:51 +08:00
parent 7d704ca3b7
commit f6b05da402
3 changed files with 132 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
dsLightRag/XingJun/c9fc2122-9324-4e2b-9bae-ced575575eca-1.png → dsLightRag/XingJun/background.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 886 KiB

After

Width:  |  Height:  |  Size: 886 KiB

0
dsLightRag/XingJun/animated_arrow.html → dsLightRag/XingJun/fill.html
View File

132
dsLightRag/XingJun/move.html Normal file
View File

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