关于用 Framer Motion 顺序运行多个动画的问题答案

【问题标题】：Question about running multiple animations in sequence with Framer Motion关于用 Framer Motion 顺序运行多个动画的问题
【发布时间】：2022-09-28 01:28:41
【问题描述】：

我从今天开始只使用 Framer Motion，我想知道是否可以在一张图像上运行多个动画并特别重复一个。基本上，我想让图像移动，然后对其进行重力效果。

您应该能够运行多个动画并重复一个，但我不完全确定您在问什么。
尽量保持简单。当图像在我想要的位置时，我希望它“吸引”。我只需要知道图像在正确位置后如何运行动画。
哦，所以喜欢做一个动画进入页面，然后永远重复第二个动画？
就是这样！对不起我的英语

标签： reactjs framer-motion

【解决方案1】：

幸运的是，有一种相当简单的方法可以在成帧器运动中运行多个动画并重复最后一个。

使用useAnimation() 挂钩，我们可以设置component animation controls，然后能够按顺序执行我们想要的任何动画。

首先确保创建一个AnimationControls 对象：

  const animationControls = useAnimation();

然后我们将设置我们的<motion.div> 以使用我们创建的AnimationControls 对象：

      <motion.div
        style={{
          width: 150,
          height: 150,
          borderRadius: 30,
          backgroundColor: "#fff",
        }}
        animate={animationControls} // This will let us control the animation using the animationControls object
      />

接下来我们设置我们想要遵循的动画序列。请注意，在最后的.start 调用中，我们将transition 设置为具有repeat: Infinity 的属性，因此它将永远重复。

  async function sequence() {
    await animationControls.start({ rotate: -90 });
    await animationControls.start({ scale: 1.5 });
    await animationControls.start({ rotate: 0 });
    await animationControls.start({ scale: 1 });
    animationControls.start({
      x: 100,
      transition: {
        ease: "easeInOut",
        duration: 1,
        repeat: Infinity,
        repeatType: "reverse"
      }
    });
  }

最后一步是在页面加载时调用sequence()，这将启动动画：

  useEffect(() => {
    sequence();
  }, []);

这是一个codesandbox 来展示所有这些部分。

【讨论】：