如何使用成帧器运动在圆上制作动画路径？

Question

我遇到了这个问题：我正在制作一个圆圈，它的动画效果就像它有 2 笔画一样。此外，动画有 2 个起点。知道出了什么问题吗？

https://codesandbox.io/s/silly-bohr-fo5bs?file=/src/App.js

import { motion } from "framer-motion";
import styled from "styled-components";

const Circle = styled(motion.path)`
  stroke: #301240;
  stroke-width: 0.5;
  fill: none;
`;
const Line = styled.line`
  fill: none;
  stroke: #301240;
  stroke-miterlimit: 10;
  stroke-width: 0.74px;
`;
const Svg = styled(motion.svg)`
  margin: 10px;
  width: 100px;
`;

const circleVariants = {
  hidden: {
    opacity: 1,
    pathLength: 0
  },
  visible: {
    opacity: 1,
    pathLength: 1,
    transition: {
      duration: 4,
      ease: "easeInOut"
    }
  }
};

const Close = () => {
  return (
    <>
      <Svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.49 86.49">
        <Circle
          variants={circleVariants}
          initial="hidden"
          animate="visible"
          d="M43.25.25a43,43,0,1,1-43,43,43,43,0,0,1,43-43m0-.25A43.25,43.25,0,1,0,86.49,43.25,43.25,43.25,0,0,0,43.25,0Z"
          fill="none"
        />
        <Line x1="35.31" y1="35.31" x2="51.18" y2="51.18" />
        <Line x1="51.18" y1="35.31" x2="35.31" y2="51.18" />
      </Svg>
    </>
  );
};

export default Close;

Answer 1

您的圆圈在其路径中有 2 个笔划，请改用此值：

      d="M43.25.25a43,43,0,1,1-43,43,43,43,0,0,1,43-43"

如何使用成帧器运动在圆上制作动画路径？

How to make animated path on a circle with framer motion?

reactjs

styled-components

framer-motion