如何在 framer motion 中多次使用动画

Question

就像标题中一样，我试图在单击按钮时多次为我的组件设置动画。目前，动画只运行一次，然后就不再工作了，我怎么可能实现那个

这是我正在尝试做的一个例子：

const controls = useAnimation();

    const handleClick = (e) => {
        controls.start({
            rotate: "360deg",
        });
    };

return(
<motion.button onClick={handleClick}>Button</motion.button>
<motion.div className="someRect" animate={controls}></motion.div>
)

Answer 1

老实说，我从来没有使用过 useAnimation 控件，所以我不知道这里发生了什么，也不知道如何使用您的方法来绕过这个障碍，但是您可以通过这样的方式实现您想要的。

  <button onClick={() => setRotate((prevState) => prevState + 360)}>
    Button
  </button>
  <motion.div
    className="someRect"
    animate={{
      rotate: rotate,
      transition: { duration: 3 }
    }}
    style={{ width: "100px", height: "100px", background: "red" }}
  >
  </motion.div>

我知道这个解决方案不是最优的，因为状态随着每次点击而增长和增长到可能非常大的大小，这可能会在某些时候引起问题。

在CodeSanbox

中检查我的解决方案

希望有人会想出一个更优雅的解决方案，我也很高兴看到。

如何在 framer motion 中多次使用动画

How to use animation multiple times in framer motion

javascript

animation

reactjs

next.js

framer-motion