Framer 运动无法使用 AnimateSharedLayout 正确设置 svg 动画

Question

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

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

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

我是不是做错了什么，或者这仅仅是因为 AnimateSharedLayout 仍处于测试阶段？因为它以正确的角度移动，所以感觉它应该可以工作，但也许我只是遗漏了一些需要设置的其他 attributes/properties，以便它从正确的位置开始。

任何关于如何解决这个问题或者它是否只是一个错误的建议将不胜感激。谢谢！

Answer 1

您可以这样代替使用 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)}
    />
  );
}

Answer 2

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

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

Framer 运动无法使用 AnimateSharedLayout 正确设置 svg 动画

Framer motion not animating svg correctly with AnimateSharedLayout

reactjs

svg

framer-motion