css - 形状 "8"仅使用 SVG <animate> 的循环动画

Question

我非常头疼，试图找到最佳位置以使用只是的组合来实现“8”形动画 <animate attributeName="cx">和 <attributeName="cy"> .
我会喜欢用它来做它，因为根据我的指标，它似乎在 FPS、CPU 和 GPU 使用方面表现最好。

“理想”运动路径的快速演示:https://codepen.io/ivancis/pen/eYmZowz

Answer 1

评论细化引起的新解

I need to animate a svg element using just a combination of <animate attributeName="cx"> <animate attributeName="cy"> (for performance) to make an "8" shape motion, looped

由于作者不想使用 animateMotion命令，在这种情况下 我只看到一种实现圆沿无限符号移动动画的方法:

需要沿着无限符号依次选择许多点，并将它们的坐标赋给圆cx = "x" , cy = "y"

选择的点越多，圆沿无穷大符号移动的轨迹越近

在矢量编辑器中，我依次将圆圈放在无穷大符号上，并记下它们的圆心坐标。第一个圆的中心坐标是 cx ="70" cy ="60"
因此，它适用于位于无限符号沿线的所有圆圈。最后一个圆与第一个圆的坐标相同，从而实现闭环

剩下的只是在动画公式中代入这些值cx , cy

圆圈运动动画cx , cy半径 r="5

 <div class="group">
  
  <svg class="ball" xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 120 120">    
  
    
    <circle fill="olive" cx="70" cy="60" r="5">
      <animate
              attributeName="cx"
              attributeType="XML"
              repeatCount="indefinite"
              begin="0s"
              dur="2s"
              values="70;65;60;55;50;45;40.5;40.5;42.5;45.1;48.7;52;55;58;60;61;61;61;61;61;61;62.9;66;69;
			  73;76;79;81;80;78;74;70">
              
        </animate>
		  <animate
				  attributeName="cy"
				  attributeType="XML"
				  repeatCount="indefinite"
				  begin="0"
				  dur="2s"
				  values="60;60;60;60;60;58.3;52.5;47.9;44.4;41.8;40.3;40;41;43;47;51;55;60;65;70;74;77;79;
				  80;80;79;76;72;67;64;61;60">							 
		  </animate>   
	</circle>
	  	    
	   <path fill="none" stroke="black" stroke-dasharray="2" d="M70.5,60.5c5.5,0,10,4.5,10,10s-4.5,10-10,10s-10-4.5-10-10v-20c0-5.5-4.5-10-10-10s-10,4.5-10,10 s4.5,10,10,10H70.5z"/>
  </svg>
</div>
  

半径 r = 40如问题作者的例子

 <div class="group">
  
  <svg class="ball" xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 120 120">    
  
    
    <circle fill="olive" cx="70" cy="60" r="40">
      <animate
              attributeName="cx"
              attributeType="XML"
              repeatCount="indefinite"
              begin="0s"
              dur="2s"
              values="70;65;60;55;50;45;40.5;40.5;42.5;45.1;48.7;52;55;58;60;61;61;61;61;61;61;62.9;66;69;
			  73;76;79;81;80;78;74;70">
              
        </animate>
		  <animate
				  attributeName="cy"
				  attributeType="XML"
				  repeatCount="indefinite"
				  begin="0"
				  dur="2s"
				  values="60;60;60;60;60;58.3;52.5;47.9;44.4;41.8;40.3;40;41;43;47;51;55;60;65;70;74;77;79;
				  80;80;79;76;72;67;64;61;60">							 
		  </animate>   
	</circle>
	  	    
	   <path fill="none" stroke="black" stroke-dasharray="2" d="M70.5,60.5c5.5,0,10,4.5,10,10s-4.5,10-10,10s-10-4.5-10-10v-20c0-5.5-4.5-10-10-10s-10,4.5-10,10 s4.5,10,10,10H70.5z"/>
  </svg>
</div>