关于 Framer Motion 中运行多个动画的问题

Question

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

Answer 1

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

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

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

  const animationControls = useAnimation();

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

      <motion.div
        style={{
          width: 150,
          height: 150,
          borderRadius: 30,
          backgroundColor: "#fff",
        }}
        animate={animation} // 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 to show all of these parts together.

关于 Framer Motion 中运行多个动画的问题

Question about running multiple animations in sequence with Framer Motion

reactjs

framer-motion

关于 Framer Motion 中 运行 多个动画的问题

Question about running multiple animations in sequence with Framer Motion

reactjs

framer-motion

关于 Framer Motion 中运行多个动画的问题