使用Framer Motion在单击时反转动画

Question

如何在点击时触发repeatType？

<motion.div
  animate={{ rotate: 180 }}
  transition={{
    repeat: 1,
    repeatType: "reverse",
    duration: 2
  }}
/>

Answer 1

这是example

代码：

import * as React from "react";
import { render } from "react-dom";
import { Frame, useCycle } from "framer";

export function MyComponent() {
  const [animate, cycle] = useCycle(
    { scale: 1.5, rotate: 0 },
    { scale: 1.0, rotate: 180 }
  );
  return (
    <Frame
      animate={animate}
      transition={{ duration: 2 }}
      onTap={() => cycle()}
      size={150}
      radius={30}
      background={"#000"}
    />
  );
}

const rootElement = document.getElementById("root");
render(<MyComponent />, rootElement);

注意，运动对象有两个属性：animation和transition。Animation -对象的动画，transition -动画的工作方式/时间。我建议你严格分离这两个道具，并且所有的行为都是在过渡中描述的，只为准确的动画保留动画。