const path = document.querySelector('#track');
const runner = document.querySelector('#runner');
const len = path.getTotalLength();
xjs({p: 0}).animate({
p: [0, 1],
duration: 1400,
easing: 'ease-in-out',
update: ({progress}) => {
const pt = path.getPointAtLength(len * progress);
runner.setAttribute('transform', `translate(${pt.x} ${pt.y})`);
}
});
<path id="track" d="M..." />
<g id="runner">...</g>
.runner { fill: var(--accent-color); filter: drop-shadow(0 0 8px rgba(255,159,67,0.25)); }
功能说明：
- 这里用 xjs(plainObject) 做“进度发生器”，在 update 里把进度映射到 path。
- 好处是：你可以把任何复杂逻辑（路径、碰撞、转向、跟随摄像机）都写在 update 里。
READY