Framer Motion 无限图片轮播实现问题求助

嘿，我最近在尝试用 Framer Motion 做一个无限滚动的图片轮播（每张图尺寸都一致），但怎么都没法达到理想效果。我想要的是所有图片以相同速度平滑滚动，没有任何停顿，当轮播到最后一张图时，能无缝衔接回到第一张继续滚动。

我试过调整动画时长或者X轴位置参数，但结果是轮播里的每个元素速度不一样，直接崩了。后来给每个元素加了启动延迟，倒是让它们速度统一了，但又出现了元素加载时的闪烁，或者轮播里有空白区域的问题。

以下是我的代码：

const ExoticImage = React.forwardRef<HTMLImageElement, ImageProps>(
  function ExoticImageWrapper(props, ref) {
    return <Image {...props} ref={ref} />;
  }
);

const MotionImage = motion(ExoticImage);

type ImageUrlAlt = {
  url: string;
  alt: string;
};

function CarouselItem({ i, index }: { i: ImageUrlAlt; index: number }) {
  const x = useMotionValue(1);
  const controls = useAnimationControls();

  const pic = (
    <MotionImage
      style={{ x }}
      src={i.url}
      height={500}
      width={500}
      alt={i.alt}
      animate={controls}
      className="rounded-lg drop-shadow-lg"
    />
  );

  useMotionValueEvent(x, "animationComplete", () => {
    console.log(index);
    controls.set({ x: 1250 });
    controls.start({
      x: -1250,
      transition: {
        ease: "linear",
        duration: 5,
      },
    });
  });

  React.useEffect(() => {
    controls.set({ x: 1250 });
    setTimeout(() => {
      controls.start({
        x: -1250,
        transition: {
          ease: "linear",
          duration: 5,
        },
      });
    }, index * 1000);
  }, [pic]);

  return pic;
}

function Carousel({ images }: { images: Array<ImageUrlAlt> }) {
  return (
    <div className="flex space-y-3 xl:space-y-0 xl:space-x-3 items-center justify-center flex-col xl:flex-row">
      {images.map((i, index) => (
        <CarouselItem i={i} index={index} />
      ))}
    </div>
  );
}

我试了各种参数调整，都没法得到满意的结果，有没有大佬能帮忙看看问题出在哪，或者给个可行的实现方案？

解决方案分析与修改建议 #

你的核心问题在于给每个轮播项单独设置动画，这种分散控制的方式很难做到精准同步，而且手动重置位置的逻辑容易导致间隙或闪烁。推荐用「容器整体滚动 + 复制元素」的经典无限轮播方案，能完美解决无缝滚动的问题：

核心思路

1. 把所有轮播项放在一个容器里，给容器做整体的X轴平移动画，确保所有图片速度完全一致。
2. 复制一份原图片数组（比如原数组是[img1,img2,img3]，变成[img1,img2,img3,img1,img2,img3]），这样当容器滚动到原数组末尾时，复制的元素会无缝衔接上，视觉上就像无限循环。
3. 利用Framer Motion的repeat: Infinity让容器动画无限循环，不需要手动监听动画结束事件。

修改后的代码示例

const ExoticImage = React.forwardRef<HTMLImageElement, ImageProps>(
  function ExoticImageWrapper(props, ref) {
    return <Image {...props} ref={ref} />;
  }
);

const MotionImage = motion(ExoticImage);

type ImageUrlAlt = {
  url: string;
  alt: string;
};

function Carousel({ images }: { images: Array<ImageUrlAlt> }) {
  // 复制图片数组，实现无缝衔接的视觉效果
  const duplicatedImages = [...images, ...images];
  const controls = useAnimationControls();

  React.useEffect(() => {
    const startInfiniteScroll = async () => {
      // 计算单张图片的总宽度（图片宽度 + 间距）
      // Tailwind的space-x-3对应12px（0.75rem），和你原代码的间距保持一致
      const itemWidth = 500 + 12;
      // 滚动总距离：原数组长度 * 单张总宽度，刚好滚动完一组原图片
      const totalScrollDistance = itemWidth * images.length;

      await controls.start({
        x: -totalScrollDistance,
        transition: {
          ease: "linear",
          // 时长按单张图5秒计算，n张图总时长就是5*n秒，保持滚动速度一致
          duration: 5 * images.length,
          repeat: Infinity,
          repeatType: "loop",
        },
      });
    };

    startInfiniteScroll();
  }, [controls, images]);

  return (
    {/* 外层容器隐藏溢出，只显示可视区域的轮播内容 */}
    <div className="overflow-hidden">
      <motion.div
        animate={controls}
        className="flex space-x-3 items-center"
      >
        {duplicatedImages.map((i, index) => (
          <MotionImage
            key={index}
            src={i.url}
            height={500}
            width={500}
            alt={i.alt}
            className="rounded-lg drop-shadow-lg"
          />
        ))}
      </motion.div>
    </div>
  );
}

方案优势

• 所有图片同步滚动，绝对不会出现速度不一致的问题。
• 复制数组的方式完美解决无缝循环，用户完全察觉不到轮播的首尾衔接点。
• 不需要复杂的动画事件监听和手动重置，逻辑更简洁可靠。

注意事项

• 确保所有图片的尺寸完全一致，否则滚动时会出现错位。
• 动画时长可以根据你的需求调整，比如想要更快的滚动速度，就缩短总时长。
• 计算itemWidth时要和你设置的元素间距保持一致，否则滚动距离会不准，导致衔接错位。

备注：内容来源于stack exchange，提问作者the bezos