132 lines
4.6 KiB
HTML
132 lines
4.6 KiB
HTML
<!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> |