DEV Community

NikiMunger
NikiMunger

Posted on

浮动动画

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();  // 启动
Enter fullscreen mode Exit fullscreen mode

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)