0

我一直在使用新的 framer 运动库来尝试将 svg 圆圈移动到新位置。它将从相对于固定位置的位置开始，所以我不能只变换圆，所以希望改用 AnimateSharedLayout。

它有点工作，但动画似乎在一条奇怪的路径中移动。动画以正确的角度移动，但看起来像是来自 svg 外部，而不是它的原始位置。我在这里设置了一个例子：

https://codesandbox.io/s/interesting-margulis-7ovme

我做错了什么还是仅仅是因为 AnimateSharedLayout 仍处于测试阶段？因为它以正确的角度移动，所以感觉它应该可以工作，但也许我只是缺少一些需要设置的其他属性/属性，因此它从正确的位置开始。

任何有关如何解决此问题或是否只是错误的建议将不胜感激。谢谢！

4

2 回答 2

0

您可以这样做，而不是使用 AnimateSharedLayout：

import React, { useState } from "react";
import { motion, useAnimation } from "framer-motion";
import "./App.css";

export default function App() {
  const [active, setActive] = useState(false);
  return (
    <motion.div
      animate={
        active
          ? {
              width: "100px",
              height: "100px",
              backgroundColor: "#000",
              translateX: "300px",
              translateY: "-300px",
              borderRadius: "50%",
            }
          : {
              width: "50px",
              height: "50px",
              backgroundColor: "#000",
              translateX: "0px",
              translateY: "0px",
              borderRadius: "50%",
            }
      }
      onClick={() => setActive(!active)}
    />
  );
}
于 2020-06-20T14:28:05.123 回答
0

我在 Framer Motion Github 中提出了一个问题，这确实是一个他们希望尽快解决的错误。

可以在此处跟踪错误进度： https ://github.com/framer/motion/issues/605

于 2020-07-16T08:45:56.267 回答