Question

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

虽然有些奏效，但动画似乎在怪异的路径上移动。动画以直角移动，但看起来好像是来自svg的外部，而不是原始位置。我在这里设置了一个示例：

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

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

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

Answer 1

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

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

Answer 2

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

成帧器运动无法使用AnimateSharedLayout正确设置SVG动画

2 个答案: