xudan/web-map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(elevator): 为向上和向下箭头添加平滑的上下移动动画以增强视觉反馈

Browse Source
This commit is contained in:
xudan 2025-12-12 10:37:40 +08:00
parent 9e1827316a
commit e8eb344d76
1 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/services/editor/editor-drawers.ts
View File

@ -216,9 +216,16 @@ function drawElevatorIcon(
if (direction === 2) {
// 向上状态 - 绿色箭头，显示在上方
const arrowSize = Math.min(width, height) * 0.35; // 箭头大小为图标较小边的35%
const arrowY = y - indicatorDistance - arrowSize - height * 0.05; // 箭头位置，留出5%缓冲
const baseArrowY = y - indicatorDistance - arrowSize - height * 0.05; // 箭头基础位置
// 绘制发光背景
// 添加上下移动动画
const movementPeriod = 1500; // 动画周期 1.5 秒
const movementAmplitude = arrowSize * 0.15; // 移动幅度为箭头大小的15%
const movementPhase = (time % movementPeriod) / movementPeriod;
const movementOffset = movementAmplitude * Math.sin(movementPhase * Math.PI * 2);
const arrowY = baseArrowY + movementOffset; // 应用移动偏移
// 绘制发光背景（跟随箭头移动）
const glowGradient = ctx.createRadialGradient(cx, arrowY + arrowSize/2, 0, cx, arrowY + arrowSize/2, arrowSize);
glowGradient.addColorStop(0, 'rgba(16, 185, 129, 0.4)');
glowGradient.addColorStop(1, 'rgba(16, 185, 129, 0)');
@ -244,9 +251,16 @@ function drawElevatorIcon(
} else if (direction === 3) {
// 向下状态 - 橙色箭头，显示在下方
const arrowSize = Math.min(width, height) * 0.35; // 箭头大小为图标较小边的35%
const arrowY = y + height + indicatorDistance + height * 0.05; // 箭头位置，留出5%缓冲
const baseArrowY = y + height + indicatorDistance + height * 0.05; // 箭头基础位置
// 绘制发光背景
// 添加上下移动动画
const movementPeriod = 1500; // 动画周期 1.5 秒
const movementAmplitude = arrowSize * 0.15; // 移动幅度为箭头大小的15%
const movementPhase = (time % movementPeriod) / movementPeriod;
const movementOffset = movementAmplitude * Math.sin(movementPhase * Math.PI * 2);
const arrowY = baseArrowY + movementOffset; // 应用移动偏移
// 绘制发光背景（跟随箭头移动）
const glowGradient = ctx.createRadialGradient(cx, arrowY + arrowSize/2, 0, cx, arrowY + arrowSize/2, arrowSize);
glowGradient.addColorStop(0, 'rgba(251, 146, 60, 0.4)');
glowGradient.addColorStop(1, 'rgba(251, 146, 60, 0)');