Framer Motion的动画在移动端卡顿怎么办？

爱学习的永伟提问于 2026-01-30 18:40:27 阅读 53

组件

我在用Framer Motion做下拉刷新动画时，iOS设备滑动特别卡顿。用了animatePresence和stagger，代码大致是这样的：

const container = useMotionValue(0);
const springConfig = { damping: 30, stiffness: 200 };

function onRefresh() {
  // 数据加载逻辑
}

return (
  <MotionViewport>
    <motion.div
      drag="y"
      dragConstraints={{ max: 100 }}
      style={{ y: container }}
      whileDrag={{ originY: 'start' }}
      transition={springConfig}
      onDragEnd={(e, { velocity }) => {
        if (container.get() > 60) onRefresh();
      }}
    >
      {/* 列表内容 */}
    </motion.div>
  </MotionViewport>
);

尝试过把layoutEffect设为false和调整framerate都不管用，有经验的同学遇到过类似问题吗？

我来解答赞 14 收藏

反馈

2 条解答

萌新.秀云 Lv1

应该是iOS的合成层渲染问题，试试把动画元素设为will-change: transform。改下style这样写：

<motion.div

  style={{ 

    y: container,

    willChange: 'transform',

    WebkitBackfaceVisibility: 'hidden' 

  }}

>

另外把damping调到40以上，iOS对弹性动画特别敏感。不行的话再告诉我，这破问题我遇到过好几次了。

2026-03-09 19:02

宇文桂霞 Lv1

移动端卡顿大概率是性能问题，建议先把复杂的动画逻辑简化。试试看把drag换成panGesture手动控制，避免Framer Motion内部的性能开销：

const [y, setY] = useState(0);



function onPan({ point }) {

  setY(point.y);

}



return (

  <motion.div

    style={{ y }}

    onPan={onPan}

    onPanEnd={(e, { velocity }) => {

      if (y > 60) onRefresh();

      setY(0); // 回弹

    }}

  >

    {/* 列表内容 */}

  </motion.div>

);

实在不行就直接用原生CSS动画或者requestAnimationFrame自己写滑动逻辑，别让库拖后腿。

2026-01-30 19:00