Spring动画的阻尼参数怎么调才不抖动？

Mr-爱景提问于 2026-03-01 19:05:22 阅读 10

交互

我用 Framer Motion 做一个弹窗的入场动画，用了 spring 类型，但每次弹出来都会来回抖好几次，特别难受。

试过改 damping 和 stiffness，比如设成 damping: 20, stiffness: 200，但还是有点回弹。有没有经验的朋友说说，这两个参数到底该怎么配才能又快又稳？

这是我的代码：

const modalVariants = {
  hidden: { opacity: 0, scale: 0.8 },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      type: 'spring',
      damping: 15,
      stiffness: 300,
      mass: 1
    }
  }
};

JS动画交互设计动画效果

我来解答赞 2 收藏

反馈

1 条解答

慕容青青 Lv1

damping 调到 25-30 就不抖了，你那个 15 太低肯定弹。直接改成 damping: 25, stiffness: 200，稳得很。

const modalVariants = {

  hidden: { opacity: 0, scale: 0.8 },

  visible: {

    opacity: 1,

    scale: 1,

    transition: {

      type: 'spring',

      damping: 25,

      stiffness: 200,

      mass: 1

    }

  }

};

想更快就把 stiffness 往上调，但 damping 也要跟着涨，比例大概 1:8 到 1:10 左右就不会抖。

2026-03-01 19:07