diff --git a/src/services/editor/editor-drawers.ts b/src/services/editor/editor-drawers.ts index bb6b696..8166f7c 100644 --- a/src/services/editor/editor-drawers.ts +++ b/src/services/editor/editor-drawers.ts @@ -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)');