'commit'
This commit is contained in:
@@ -32,14 +32,30 @@
|
||||
height: 200px;
|
||||
z-index: 999;
|
||||
}
|
||||
button {
|
||||
.control-panel {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
z-index: 1000;
|
||||
}
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.param-display {
|
||||
position: absolute;
|
||||
bottom: 80px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
padding: 8px 15px;
|
||||
border-radius: 4px;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
z-index: 1000;
|
||||
}
|
||||
</style>
|
||||
@@ -47,7 +63,6 @@
|
||||
<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"
|
||||
@@ -64,69 +79,211 @@
|
||||
stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="param-display" id="paramDisplay"></div>
|
||||
<div class="control-panel">
|
||||
<button id="startButton">开始移动</button>
|
||||
<button id="saveButton">保存位置</button>
|
||||
<button id="resetButton">重置默认</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 简化的动画逻辑
|
||||
// 获取DOM元素（确保只获取新箭头）
|
||||
const arrowLeft = document.getElementById('outlineArrowLeft');
|
||||
const arrowRight = document.getElementById('outlineArrowRight');
|
||||
const startButton = document.getElementById('startButton');
|
||||
const saveButton = document.getElementById('saveButton');
|
||||
const resetButton = document.getElementById('resetButton');
|
||||
let animationId = null;
|
||||
let isAnimating = false;
|
||||
let isDraggingLeft = false;
|
||||
let isDraggingRight = false;
|
||||
let initialX = 0;
|
||||
let initialLeftPos = 0;
|
||||
let initialRightPos = 0;
|
||||
|
||||
// 默认位置配置
|
||||
const DEFAULT_POSITIONS = {
|
||||
left: 'translate(-100px, 0)',
|
||||
right: 'translate(350px, 0) scale(-1, 1)'
|
||||
};
|
||||
|
||||
// 从localStorage加载保存的位置
|
||||
function loadSavedPositions() {
|
||||
try {
|
||||
const savedLeft = localStorage.getItem('arrowLeftPosition');
|
||||
const savedRight = localStorage.getItem('arrowRightPosition');
|
||||
if (savedLeft && savedRight) {
|
||||
arrowLeft.style.transform = savedLeft;
|
||||
arrowRight.style.transform = savedRight;
|
||||
return true;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载保存位置失败:', e);
|
||||
}
|
||||
// 加载失败或无保存数据时使用默认位置
|
||||
arrowLeft.style.transform = DEFAULT_POSITIONS.left;
|
||||
arrowRight.style.transform = DEFAULT_POSITIONS.right;
|
||||
return false;
|
||||
}
|
||||
|
||||
// 保存当前位置到localStorage
|
||||
function saveCurrentPositions() {
|
||||
try {
|
||||
const leftTransform = arrowLeft.style.transform;
|
||||
const rightTransform = arrowRight.style.transform;
|
||||
localStorage.setItem('arrowLeftPosition', leftTransform);
|
||||
localStorage.setItem('arrowRightPosition', rightTransform);
|
||||
alert('位置已保存！下次打开将自动应用当前位置');
|
||||
return true;
|
||||
} catch (e) {
|
||||
console.error('保存位置失败:', e);
|
||||
alert('保存失败，请重试');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 重置为默认位置
|
||||
function resetToDefaultPositions() {
|
||||
if (confirm('确定要重置为默认位置吗？')) {
|
||||
localStorage.removeItem('arrowLeftPosition');
|
||||
localStorage.removeItem('arrowRightPosition');
|
||||
arrowLeft.style.transform = DEFAULT_POSITIONS.left;
|
||||
arrowRight.style.transform = DEFAULT_POSITIONS.right;
|
||||
updateParamDisplay();
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化箭头位置
|
||||
arrowLeft.style.transform = 'translate(-100px, 0)';
|
||||
// 调整右侧箭头初始位置，使其在SVG可见区域内
|
||||
arrowRight.style.transform = 'translate(350px, 0) scale(-1, 1)';
|
||||
function initArrowPositions() {
|
||||
const hasSaved = loadSavedPositions();
|
||||
updateParamDisplay();
|
||||
// 显示加载状态
|
||||
if (hasSaved) {
|
||||
console.log('已加载保存的位置');
|
||||
} else {
|
||||
console.log('使用默认位置');
|
||||
}
|
||||
}
|
||||
|
||||
// 开始动画
|
||||
// 解析translateX值
|
||||
function parseTranslateX(transform) {
|
||||
const matrix = new DOMMatrix(transform);
|
||||
return matrix.e;
|
||||
}
|
||||
|
||||
// 更新参数显示
|
||||
function updateParamDisplay() {
|
||||
const leftTransform = arrowLeft.style.transform;
|
||||
const rightTransform = arrowRight.style.transform;
|
||||
document.getElementById('paramDisplay').textContent =
|
||||
`左侧箭头: ${leftTransform} | 右侧箭头: ${rightTransform}`;
|
||||
}
|
||||
|
||||
// 动画控制函数
|
||||
function startAnimation() {
|
||||
if (isAnimating) return;
|
||||
|
||||
isAnimating = true;
|
||||
startButton.disabled = true;
|
||||
startButton.textContent = "移动中...";
|
||||
saveButton.disabled = true;
|
||||
|
||||
const duration = 2000; // 动画持续时间（毫秒）
|
||||
const duration = 2000;
|
||||
const startTime = performance.now();
|
||||
// 初始位置
|
||||
const startLeft = -100;
|
||||
// 右侧箭头初始位置调整为350px（原600px超出可见区域）
|
||||
const startRight = 350;
|
||||
// 目标位置
|
||||
const startLeft = parseTranslateX(getComputedStyle(arrowLeft).transform);
|
||||
const startRight = parseTranslateX(getComputedStyle(arrowRight).transform);
|
||||
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)`;
|
||||
updateParamDisplay();
|
||||
|
||||
if (progress < 1) {
|
||||
animationId = requestAnimationFrame(animate);
|
||||
} else {
|
||||
// 动画完成
|
||||
isAnimating = false;
|
||||
startButton.disabled = false;
|
||||
startButton.textContent = "重新开始";
|
||||
saveButton.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
animationId = requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
// 绑定按钮点击事件
|
||||
// 绑定拖动事件
|
||||
function bindDragEvents() {
|
||||
// 左侧箭头拖动
|
||||
arrowLeft.style.cursor = 'grab';
|
||||
arrowLeft.addEventListener('mousedown', (e) => {
|
||||
if (isAnimating) return;
|
||||
isDraggingLeft = true;
|
||||
initialX = e.clientX;
|
||||
initialLeftPos = parseTranslateX(getComputedStyle(arrowLeft).transform);
|
||||
arrowLeft.style.cursor = 'grabbing';
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// 右侧箭头拖动
|
||||
arrowRight.style.cursor = 'grab';
|
||||
arrowRight.addEventListener('mousedown', (e) => {
|
||||
if (isAnimating) return;
|
||||
isDraggingRight = true;
|
||||
initialX = e.clientX;
|
||||
initialRightPos = parseTranslateX(getComputedStyle(arrowRight).transform);
|
||||
arrowRight.style.cursor = 'grabbing';
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// 鼠标移动
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
if (isDraggingLeft) {
|
||||
const deltaX = e.clientX - initialX;
|
||||
const newPos = initialLeftPos + deltaX;
|
||||
arrowLeft.style.transform = `translate(${newPos}px, 0)`;
|
||||
updateParamDisplay();
|
||||
} else if (isDraggingRight) {
|
||||
const deltaX = e.clientX - initialX;
|
||||
const newPos = initialRightPos + deltaX;
|
||||
arrowRight.style.transform = `translate(${newPos}px, 0) scale(-1, 1)`;
|
||||
updateParamDisplay();
|
||||
}
|
||||
});
|
||||
|
||||
// 鼠标释放
|
||||
document.addEventListener('mouseup', () => {
|
||||
if (isDraggingLeft || isDraggingRight) {
|
||||
isDraggingLeft = false;
|
||||
isDraggingRight = false;
|
||||
arrowLeft.style.cursor = 'grab';
|
||||
arrowRight.style.cursor = 'grab';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 绑定按钮事件
|
||||
function bindButtonEvents() {
|
||||
startButton.addEventListener('click', startAnimation);
|
||||
saveButton.addEventListener('click', saveCurrentPositions);
|
||||
resetButton.addEventListener('click', resetToDefaultPositions);
|
||||
}
|
||||
|
||||
// 初始化
|
||||
function init() {
|
||||
initArrowPositions();
|
||||
bindDragEvents();
|
||||
bindButtonEvents();
|
||||
}
|
||||
|
||||
// 启动应用
|
||||
init();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user