同步svg动画

Question

请告诉我，如何同步svg动画。越来越多的线和移动圈。我希望圆圈永远在线上。

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我无法理解为什么这些动画的速度不同。我试图延迟动画，但它没有帮助

Answer 1

垂直路径段的长度是水平段的两倍。因此必须

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

Answer 2

闭环动画同步示例。

修改补丁以产生闭环。

<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>