如何使用按钮来使用成帧器运动启动卡片滑动轮播的动画？

Question

我正在尝试使用成帧器运动来制作图像滑动轮播的动画。我希望动画仅在按下按钮时才开始。问题是动画在我点击按钮之前就开始了。我有 5 张图像在一个数组中。单击按钮后，动画应如下所示：第一个图像应缩小并淡出到背景中，而其余四个图像应全部向左滑动。

后续动画应该是：现在第一个图像已经消失，第二个图像应该缩小并淡出到背景中，而剩下的 3 个图像应该全部向左滑动。

依此类推，直到只有最后一个图像可见，动画应该在那里停止。

 <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"
          ref={containerRef}
        >
          {images.map((image, index) => (
            <motion.img
              key={index}
              src={image}
              alt={`Image ${index + 1}`}
              initial={{ x: "+100%" }}
              animate={{
                opacity: index < currentIndex ? 0 : 1,
                scale: index < currentIndex ? 0 : 1,
                x: buttonClicked && index === currentIndex ? 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} className="" />
          </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>

因此不透明度和比例的动画可以正常工作。但 x 轴动画已损坏。当我的页面加载时，图像会自动向左滑动。我希望它仅在单击按钮时滑动。

Answer 1

加载代码的那一刻，动画就开始了。按钮对此没有影响。

如果您希望动画仅在单击按钮后运行，请在单击按钮时加载新组件。 这个新组件是动画的。

接下来的图像也是如此：将它们加载到一个小的单独组件中，然后单击按钮加载该组件。