Framer Motion 返回拖动按钮

Question

我有可以通过拖动成帧器运动来移动的对象。如何制作一个按钮将所有元素返回到其初始位置？

我尝试用animate来做，但是动画很尖锐而且丑陋。我认为这是因为当您释放该元素时，它仍然会在空间中“漂浮”一段时间，并且在动画继续这样做之后。

Answer 1

您可以使用 Framer Motion 中的

useTransform

挂钩。您可以使用 initial 属性设置每个元素的初始位置，然后使用

useTransform

钩子根据按钮的状态更新每个元素的位置。

import React, { useState } from "react";
import { motion, useTransform } from "framer-motion";

const MyComponent = () => {
const [isReset, setIsReset] = useState(false);

const x = useTransform(isReset, [false, true], [0, 100]);
const y = useTransform(isReset, [false, true], [0, 100]);

return (
    <>
      <motion.div
        drag
        style={{ x, y }}
        transition={{ duration: 0.5, ease: "easeInOut" }}
      />
      <button onClick={() => setIsReset(true)}>Reset</button>
    </>
  );
};

export default MyComponent;

Answer 2

tttttttfggdt hnbnjrrrt哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈）