Framer 运动无法使用 AnimateSharedLayout 正确地为 svg 设置动画答案

【问题标题】：Framer motion not animating svg correctly with AnimateSharedLayoutFramer 运动无法使用 AnimateSharedLayout 正确地为 svg 设置动画
【发布时间】：2020-07-16 16:45:56
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： reactjs svg framer-motion

【解决方案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)}
    />
  );
}

【讨论】：

感谢您的回复，但这并不能解决我的问题。我提供的示例是所需内容的简化版本，使用 svg 和使用 AnimateSharedLayout 都是要求
我认为 AnimateShared Layout 不能用于此目的。正如文档所说：“AnimateSharedLayout 允许在单独的组件之间制作动画。”所以你看到的行为不是错误。这是默认行为。您正在尝试做的是为一个单独的组件设置动画。
在我的示例中，我在不同的组件之间制作动画。这在很大程度上是 AnimateSharedLayout 的用例。这是一个使用 div 而不是 svgs 并使用 AnimateSharedLayout 按预期工作的示例：codesandbox.io/s/purple-dew-mi9rb。但是，出于我的需要，我需要使用 svgs，因为整个组件比示例更复杂

【解决方案2】：

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

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

【讨论】：