let bobberPhase = 0;
const bobberAnimate = () => {
if (!mini || !bobber.parentNode) return; // 已移除则停止
bobberPhase = (bobberPhase + 0.05) % (Math.PI * 2);
const offsetY = Math.sin(bobberPhase) * 15; // -15px ~ +15px
bobber.style.transform = `translateX(-50%) translateY(${offsetY}px)`;
requestAnimationFrame(bobberAnimate);
};
bobberAnimate(); // 启动
sin()永远在-1~1之间
所以offsetY永远在-15px ~ 15px之间
所以bobber永远在-15px ~ 15px之间上下浮动
% (Math.PI * 2)
2π 是正弦波的一个周期,
所以只需要让相位保持在:0 ~ 2π这一圈就够了。不取模会导致 bobberPhase 无限变大
让动画永远平滑地循环
% (2π) 的作用:bobberPhase += 0.05,如果超过 2π,就从 0 重新开始
这样你就得到一个永远循环的波:0 → 0.05 → 0.10 → ... → 6.28 → 0 → 0.05 → 0.10 → ...相位永远不会失控,也不会变成巨大数字。
Top comments (0)