使用成帧器运动的 svg 动画

Question

我需要创建这个基本形状和那些弯曲的灰线，这些灰线应该始终存在，因为它们是静态的，并且在这些灰线之上应该无限地流动蓝色球，它们应该同时无限地流动，蓝色球应该从中心“U”形状开始，直到其他形状，这应该无限重复 要创建的图像 ->

我尝试过创建类似的东西，但不知道如何像所附图像那样弯曲这些线，也不知道如何获得那些蓝色球，因此添加了蓝色线 注意：灰线应该始终是静态和恒定的，并且在这些灰线之上应该流动蓝色的球

代码->

import { motion } from "framer-motion";


  const Comp = () => {
return (
<svg width="800" height="800" viewBox="0 0 200 200" className="rotate-90">
        {/* Lines from the left side */}
        <line
          y1="100"
          x1="100"
          x2="52"
          y2="175"
          stroke="#3D414899"
          strokeWidth="1"
        />
        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          y1="100"
          x1="100"
          x2="52"
          y2="175"
        />
        <line
          x1="100"
          y1="100"
          x2="76"
          y2="174"
          stroke="#3D414899"
          strokeWidth="1"
        />
        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          x1="100"
          y1="100"
          x2="76"
          y2="174"
        />
        <line
          x1="100"
          y1="100"
          x2="100"
          y2="174"
          stroke="#3D414899"
          strokeWidth="1"
        />
        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          x1="100"
          y1="100"
          x2="100"
          y2="174"
        />
        <line
          x1="100"
          y1="100"
          x2="126"
          y2="180"
          stroke="#3D414899"
          strokeWidth="1"
        />
        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          x1="100"
          y1="100"
          x2="126"
          y2="180"
        />
        <line
          x1="100"
          y1="100"
          x2="147"
          y2="168"
          stroke="#3D414899"
          strokeWidth="1"
        />
        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          x1="100"
          y1="100"
          x2="147"
          y2="168"
        />

        {/* Lines from the right side */}
        {/* Lines from the right side */}
        <line
          x1="100"
          y1="100"
          x2="148" 
          y2="25"
          stroke="#3D414899"
          strokeWidth="1"
        />
        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          x1="100"
          y1="100"
          x2="148"
          y2="25"
        />
        <line
          x1="100"
          y1="100"
          x2="124"
          y2="26"
          stroke="#3D414899"
          strokeWidth="1"
        />
        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          x1="100"
          y1="100"
          x2="124"
          y2="26"
        />
        <line
          x1="100"
          y1="100"
          x2="100"
          y2="26"
          stroke="#3D414899"
          strokeWidth="1"
        />
        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          x1="100"
          y1="100"
          x2="100"
          y2="26"
        />
        <line
          x1="100"
          y1="100"
          x2="74"
          y2="20"
          stroke="#3D414899"
          strokeWidth="1"
        />
        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          x1="100"
          y1="100"
          x2="74"
          y2="20"
        />
        <line
          x1="100"
          y1="100"
          x2="55"
          y2="27"
          stroke="#3D414899"
          strokeWidth="1"
        />

        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          x1="100"
          y1="100"
          x2="55"
          y2="27"
        />
      </svg> 
)
}

Answer 1

假设您有下一条连接 2 个点的折线：{x:150,y:75} 和 {x:230,y:30}。如果您不了解 SVG，M 命令就是 move to 命令（您移动到这一点）接下来是一些 L 命令。这是从实际点到下一个点绘制一条线。例如

L180,75

正在画一条从 150,75 到 180,75 的线。

<svg fill="none" stroke="black">
  <path   
       d="M150,75
          L180,75
          L180,30
          L230,30"/>
 </svg>

现在为了添加曲率，您需要使用顶点作为二次贝塞尔曲线的控制点。对于贝塞尔曲线，您需要一个起点和一个终点。为此，您将在 10 个单位之前停止上一行，并在 10 个单位之后开始下一行。 （示例为 10。您可能想选择其他值）

<svg fill="none" stroke="black">
  <!--<path   
       d="M150,75
          L180,75
          here goes the first quadratic Bezier command
          L180,30
          here goes the second quadratic Bezier command
          L230,30"/>-->
  
  <path
        d="M150,75
           L170,75
           Q180,75 180,65
           L180,40
           Q180,30 190,30
           L230,30"/>
</svg>

至于图标，您首先设置图标的位置，然后确定连接图标的线的起点和终点。接下来绘制折线，最后添加曲率。

请尝试组合一个小示例，其中将中央 U 与图标连接起来。然后，如果您需要更多想法，请再次询问。