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

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

组件

我在用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都不管用，有经验的同学遇到过类似问题吗？

我来解答赞 8 收藏

反馈

1 条解答

宇文桂霞 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