Framer-Motion：实现拖动组件点击按钮时x位置的动画过渡

我刚好遇到过类似的问题，其实核心原因是useMotionValue的set()方法是即时更新值，不会触发任何动画过渡。而直接换成useSpring确实会干扰拖动的原生流畅感——因为spring的缓动特性会让拖动时的反馈滞后。

给你一个完美的解决方案：保留useMotionValue来维持拖动的顺畅体验，同时用Framer Motion提供的animate()函数来处理按钮点击时的动画过渡。这样两者的优势都能兼顾。

具体修改步骤 #

1. 首先从framer-motion导入animate函数
2. 将按钮点击事件里的x.set()替换为animate()，通过配置动画参数实现平滑过渡

修改后的完整代码 #

import { motion, useMotionValue, animate } from "framer-motion";

const HorizontalScroll = ({ children }) => { 
  const x = useMotionValue(0); 

  function onLeftClick() { 
    const xPos = x.get(); 
    if (Math.round(xPos) === 0) { return; } 
    // 计算目标位置，确保不超过右边界0
    const targetX = Math.min(xPos + 600, 0);
    // 触发x值的平滑动画过渡
    animate(x, targetX, {
      duration: 0.5,
      ease: "easeInOut"
    });
  } 

  function onRightClick() { 
    const xPos = x.get(); 
    // 计算目标位置，确保不超过左边界-2000
    const targetX = Math.max(xPos - 600, -2000);
    // 触发x值的平滑动画过渡
    animate(x, targetX, {
      duration: 0.5,
      ease: "easeInOut"
    });
  } 

  return ( 
    <> 
      <button type="button" onClick={onLeftClick} > Left </button> 
      <motion.div 
        drag="x" 
        dragConstraints={{ left: -2000, right: 0 }} 
        initial={false} 
        style={{ width: 2000, x }} 
      > 
        {children} 
      </motion.div> 
      <button type="button" onClick={onRightClick} > Right </button> 
    </> 
  ); 
};

方案优势说明 #

• 拖动体验不受影响：useMotionValue依然负责拖动逻辑，确保拖动时的响应是即时、流畅的，没有spring带来的滞后感。
• 动画与拖动无缝衔接：animate()函数会在点击按钮时，以动画的方式将x的值过渡到目标位置，就算拖动到一半点击按钮，动画也会从当前位置继续执行，完全不冲突。
• 高度可定制：你可以调整animate的配置项，比如修改duration（动画时长）、ease（缓动函数），甚至添加type: "spring"来实现弹簧动画效果，完全适配你的需求。

内容的提问来源于stack exchange，提问作者Wiljan