同步 svg 动画

Question

请告诉我，如何同步 svg 动画。生长线和动圈。我希望圆圈始终位于最前面。

body {
  background-image: radial-gradient(circle farthest-corner at center, #1c262b 0, #000 100%)
}

#example {
  height: 90vh;
  display: block;
  margin: 5vh auto;
}

.st0 {
  fill: none;
  stroke: #e2080c;
  stroke-miterlimit: 10;
  stroke-width: 1;
}

#rightCircle {
  animation: animationRightCircle 2s linear;
  animation-fill-mode: forwards;
}

@keyframes animationRightCircle {
  0% {
    transform: translate(320px, 2px)
  }
  33.33% {
    transform: translate(638px, 2px)
  }
  66.66% {
    transform: translate(638px, 638px)
  }
  100% {
    transform: translate(320px, 638px)
  }
}

#rightPath {
  stroke-dasharray: 1276;
  animation: pathGrowing 2s linear;
  animation-fill-mode: forwards;
}

@keyframes pathGrowing {
  0% {
    stroke-dashoffset: 1276;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

<svg id="example" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640">
   
   <path id="rightPath" class="st0" d="M320,1 639,1 639,639 320,639"/>
   
   <defs>
		<circle id="myCircle" r="2"  fill="#e2080c"/>
	</defs>

	<use id="rightCircle" xlink:href="#myCircle" />
   
   </svg>

我不明白为什么这些动画的速度不同。我试图延迟动画，但没有帮助

Answer 1

闭环动画同步示例。

补丁被修改以产生一个闭环。

<path  id="rightPath" class="st0" d="M320,1 639,1 639,639 320,639 320,1"/>   

更改了同步球动画和绘制路径的百分比

body {
  background-image: radial-gradient(circle farthest-corner at center, #1c262b 0, #000 100%)
}

#example {
  height: 90vh;
  display: block;
  margin: 5vh auto;
}

.st0 {
  fill: none;
  stroke: #e2080c;
  stroke-miterlimit: 10;
  stroke-width: 2;
}

#rightCircle {
  animation: animationRightCircle 5s linear;
  animation-fill-mode: forwards;
}

@keyframes animationRightCircle {
0.1% {
    transform: translate(320px, 2px)
  } 
 16.6% {
    transform: translate(640px, 2px)
  }
  49.8% {
    transform: translate(640px, 640px)
  }
  66.4% {
    transform: translate(320px, 640px)
  }
  100% {
    transform: translate(320px, 2px)
  }
}

#rightPath {
  stroke-dasharray: 1914; 
   animation: pathGrowing 5s linear;
  animation-fill-mode: forwards;
}

@keyframes pathGrowing {
  0% {
    stroke-dashoffset: 1914;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

<svg id="example" width="50%" height="50%" viewBox="0 0 644 644" >
   
    <path  id="rightPath" class="st0" d="M320,1 639,1 639,639 320,639 320,1"/> 
   
   <defs>
		<circle id="myCircle"   r="3"  fill="#6FE2E2"/>
	</defs>

	<use id="rightCircle"  xlink:href="#myCircle" />  
	
   
   </svg>

SVG 解决方案

也许使用 SVG 选项会更好？无需计算动画时间的百分比。
没有必要计算球沿给定路径的运动变换。

对象到路径的绑定是 SVG mpath 命令。

<svg id="example" width="50%" height="50%" viewBox="0 -8 650 650">
   <defs>
		<circle id="myCircle"   r="4"  />
	</defs> 
   <path id="rightPath" fill="none" "stroke-dashoffset="1280" stroke-dasharray="1280" stroke-width="2" stroke="red" d="M320,1 639,1 639,639 320,639">
     <animate attributeName="stroke-dashoffset" from="1280" to="0" dur="5s" fill="freeze" />
   </path>
    
 	<use id="rightCircle" xlink:href="#myCircle" fill="teal" > 
	
		<animateMotion id="animMotionZurGen" dur="5s" repeatCount="1" fill="freeze" >
                        <mpath xlink:href="#rightPath"/>
        </animateMotion> 
    </use>				

   </svg>

如果需要修改动画循环，只需要改变物体运动路径的路径即可。

 <path  id="rightPath" class="st0" d="M320,1 639,1 639,639 320,639 320,1"/>  

<svg id="example" width="50%" height="50%" viewBox="0 -8 650 650">
   <defs>
		<circle id="myCircle"   r="4"  />
	</defs> 
   <path id="rightPath" fill="none" "stroke-dashoffset="1914" stroke-dasharray="1914" stroke-width="2" stroke="red" d="M320,1 639,1 639,639 320,639 320,1">
     <animate attributeName="stroke-dashoffset" from="1914" to="0" dur="5s" fill="freeze" />
   </path>
    
 	<use id="rightCircle" xlink:href="#myCircle" fill="teal" > 
	
		<animateMotion id="animMotionZurGen" dur="5s" repeatCount="1" fill="freeze" >
                        <mpath xlink:href="#rightPath"/>
        </animateMotion> 
    </use>				

   </svg>

Answer 2

垂直路径段的长度是水平段的两倍。所以应该是

@keyframes animationRightCircle {
  0% {
    transform: translate(320px, 2px)
  }
  25% {
    transform: translate(638px, 2px)
  }
  75% {
    transform: translate(638px, 638px)
  }
  100% {
    transform: translate(320px, 638px)
  }
}