成帧器运动 - 使用控件更改状态后动画不会启动

Question

我为图像滑块制作了自定义点，通常效果很好。这些点触发了图像滑块动画，但我现在必须在幻灯片悬停时暂停这些点。我的问题是第一个点在第一次加载时动画然后它什么都不做，直到我将鼠标悬停在幻灯片上它会继续然后再次停止。

没有控件，它们工作完美。

我不确定问题出在我的组件中。

这里有一个 code sandbox 可以说明问题。

export const TimerDots = ({
  pauseDots,
  amount,
  duration,
  handleChange,
  activeIndex
}: {
  pauseDots?: boolean;
  amount: number;
  duration: number;
  handleChange: (e: any) => void;
  activeIndex: number;
}) => {
  const controls = useAnimation();

  const handleNextSlide = () => {
    handleChange((activeIndex += 1));
  };

  const startAnimation = controls.start({
    width: SIZE * 3,
    transition: {
      duration: duration,
      type: "tween",
      ease: "easeOut"
    }
  });

  useEffect(() => {
    startAnimation;

    if (pauseDots) {
      controls.stop();
    }
  }, [pauseDots, activeIndex]);

  return (
    <DotContainer amount={amount}>
      {[...Array.from({ length: amount })].map((_, index) => {
        return (
          <Dot
            layout
            key={index}
            onClick={() => handleChange(index)}
            $active={activeIndex === index}
          >
            {activeIndex === index && (
              <Timer
                layout
                animate={controls}
                onAnimationComplete={handleNextSlide}
              />
            )}
          </Dot>
        );
      })}
    </DotContainer>
  );
};

Answer 1

问题来自startAnimation以及它在useEffect中的使用方式

当您在 useEffect 中执行 startAnimation 时，您没有调用函数 controls.start(..)。

试试这个：


const startAnimation = () => {
    controls.start({
      width: SIZE * 3,
      transition: {
        duration: duration,
        type: "tween",
        ease: "easeOut"
      }
    });
  };

  useEffect(() => {
    startAnimation();

    if (pauseDots) {
      controls.stop();
    }
  }, [pauseDots, activeIndex, controls]);

CodeSandbox.

成帧器运动 - 使用控件更改状态后动画不会启动

Framer motion - animation doesn't start after state change using controls

reactjs

framer-motion