如何用按钮触发Framer Motion图片滑动轮播并修复自动滑动问题

页面加载时x轴动画自动触发的核心原因是：initial={{ x: "+100%" }}与animate默认状态（未点击按钮时）的x: "-100%"不一致，Framer Motion会自动从初始状态过渡到animate指定状态，导致加载时就触发滑动。以下是针对性的修复方案：

关键修改思路 #

1. 对齐初始状态与未点击状态，避免加载时自动动画
2. 仅在点击按钮后，根据currentIndex更新图片的x轴位置
3. 用buttonClicked状态区分初始未点击和已点击后的状态

修改后的完整代码 #

import { useState } from "react";
import { motion } from "framer-motion";

const ImageCarousel = ({ images, arrow }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [buttonClicked, setButtonClicked] = useState(false);

  const nextImage = () => {
    if (currentIndex < images.length - 1) {
      setCurrentIndex(prev => prev + 1);
      setButtonClicked(true);
    }
  };

  const prevImage = () => {
    if (currentIndex > 0) {
      setCurrentIndex(prev => prev - 1);
      setButtonClicked(true);
    }
  };

  return (
    <div className="flex flex-col w-1/2 mt-32 ml-10">
      <div
        className="flex flex-row gap-10 overflow-x-scroll no-scrollbar scroll-smooth mx-5"
      >
        {images.map((image, index) => (
          <motion.img
            key={index}
            src={image}
            alt={`Image ${index + 1}`}
            // 初始状态：第一张在可视区域，其余在右侧隐藏
            initial={{ 
              x: index === 0 ? 0 : "+100%",
              opacity: 1,
              scale: 1
            }}
            animate={{
              // 已滑出的图片：隐藏+缩小
              opacity: index < currentIndex ? 0 : 1,
              scale: index < currentIndex ? 0 : 1,
              // x轴逻辑：未点击时保持初始位置；点击后按索引计算滑动位置
              x: buttonClicked 
                ? index < currentIndex 
                  ? "-100%" 
                  : `calc(0% - ${100 * (index - currentIndex)}%)` 
                : (index === 0 ? 0 : "+100%")
            }}
            transition={{ duration: 0.75 }}
          />
        ))}
      </div>

      <div className="flex flex-row mt-10 gap-12">
        <button
          className="flex bg-rose_ebony rounded-full w-[68px] h-[68px] items-center justify-center"
          onClick={prevImage}
          disabled={currentIndex === 0}
        >
          <img src={arrow} />
        </button>

        <button
          className="flex bg-rose_ebony rounded-full w-[68px] h-[68px] items-center justify-center"
          onClick={nextImage}
          disabled={currentIndex === images.length - 1}
        >
          <img src={arrow} className="rotate-180" />
        </button>
      </div>
    </div>
  );
};

export default ImageCarousel;

核心修改说明 #

• 初始状态对齐：初始时第一张图片显示在可视区域（x:0），其余图片在右侧隐藏（x:"+100%"），与未点击按钮时的状态完全一致，避免加载时自动动画。
• 点击触发动画：仅当buttonClicked为true时，才根据currentIndex计算图片的x轴位置，实现点击后的滑动效果。
• 滑出逻辑优化：已滑出的图片（index < currentIndex）移动到左侧外（"-100%"）并隐藏，当前及后续图片向左滑动到对应位置，符合你预期的轮播逻辑。

可选优化：使用useAnimation精细控制 #

如果需要更灵活的动画触发时机，可以用useAnimation手动控制动画启动：

import { motion, useAnimation } from "framer-motion";

// 组件内定义
const controls = useAnimation();

const nextImage = () => {
  if (currentIndex < images.length - 1) {
    setCurrentIndex(prev => prev + 1);
    // 手动启动动画
    controls.start("active");
  }
};

// motion.img组件修改
<motion.img
  key={index}
  src={image}
  alt={`Image ${index + 1}`}
  initial="inactive"
  animate={controls}
  variants={{
    inactive: { x: index === 0 ? 0 : "+100%", opacity: 1, scale: 1 },
    active: { 
      x: index < currentIndex ? "-100%" : `calc(0% - ${100 * (index - currentIndex)}%)`,
      opacity: index < currentIndex ? 0 : 1,
      scale: index < currentIndex ? 0 : 1
    }
  }}
  transition={{ duration: 0.75 }}
/>

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