Движение фреймера не анимирует svg правильно с AnimateSharedLayout - PullRequest
Новая
       55

Движение фреймера не анимирует svg правильно с AnimateSharedLayout

0 голосов
/ 20 июня 2020

Я играл с новой библиотекой движения фреймера, чтобы попытаться переместить круг SVG в новое положение. Это будет положение относительно фиксированного положения, поэтому я не могу просто преобразовать круг и поэтому надеялся вместо этого использовать AnimateSharedLayout.

Это несколько работает, но анимация, кажется, движется по странному пути. Анимация движется под прямым углом, но кажется, что она исходит из-за пределов SVG, а не из исходного положения. Я создал здесь пример:

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

Я делаю что-то не так или это просто потому, что AnimateSharedLayout все еще находится в стадии бета-тестирования? Поскольку он движется под прямым углом, кажется, что он должен работать, но, возможно, мне просто не хватает некоторых других атрибутов / свойств, которые необходимо установить, чтобы он начинался с правильной позиции.

Любые предложения о том, как исправить это, или это просто ошибка, будет очень признательно. Спасибо!

Ответы [ 2 ]

0 голосов
/ 16 июля 2020

Я поднял проблему во Framer Motion Github, и это действительно похоже на ошибку, которую они надеются исправить в ближайшее время.

Прогресс ошибки можно отслеживать здесь: https://github.com/framer/motion/issues/605

0 голосов
/ 20 июня 2020

Вместо использования 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)}
    />
  );
}
...