如何创建动画 stackoverflow 图标

Question

在我的代码图标下方：

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 120 120">
  <style>.st0{fill:#bcbbbb}.st1{fill:#f48023}  </style>
  <path class="st0" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"/>
  <path class="st1" d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z"/>
</svg>

动画脚本：

1. 购物车轮廓绘制动画
2. 用篮子填充轮廓颜色
3. 5色条纹出现的顺序动画
4. 条带以相反的顺序消失。
5. 循环出现，彩色条纹消失。

这是我的尝试：

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 120 120" style="border:1px solid;">
  <style>
    .st0{fill:white; stroke:#BCBBBB; stroke-width:2;}
	.st1{fill:#f48023;opacity:1;}

  </style>
  <path class="st0"  d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" stroke-dasharray="0,123.5 0,123.5" stroke-dashoffset="150"> 
        <!-- Cart outline drawing animation -->
     <animate id="bask" attributename="stroke-dasharray" dur="4s" begin="svg1.click" values="0,123.5 0,123.5;0,0,247,0" fill="freeze" />  
	     <!--  Filling  baskets of the icon color -->
	   <animate id="bask_fill"  attributename="fill" dur="1s" begin="bask.end" values="white;#BCBBBB" fill="freeze" />
  </path>   
  
  <path class="st1"  d="M38 86H76.6V78.3H38V86Z">
    <animateTransform attributeName="transform" type="rotate" begin="bask_fill.end" dur="4s" values="0 100 100;45 100 100;0 100 100" repeatCount="indefinite" />
   </path>	

<text x="30" y="115" font-size="14px" fill="#BCBBBB" >Click me</text>    
   </svg>

我希望彩色条纹一个接一个出现，在最后一个条纹出现后，它们应该以相反的顺序消失。
我没有成功地应用旋转来解决这个问题。

任何对解决方案的帮助将不胜感激。

Answer 1

首先，我将开始实现问题中脚本的3到5点图标的动画

3. 彩条的外观——动画从 opacity: 0;到opacity:1;

4. 不透明度的颜色条动画消失为0

5. 然后在一个循环的出现、消失之后，将开始重复该过程

begin="svg1.click;Back5.end+1.5s"

请阅读代码中的注释

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 120 120" style="border:1px solid;">
  <style>
    .st0{fill:#bcbbbb}.st1{fill:#f48023;opacity:0;}

  </style>
  <path class="st0"  d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z">
  </path>   
  
  <path class="st1"  d="M38 86H76.6V78.3H38V86Z"> 
	       <!-- 3.   Animation of the appearance of the first color strip -->
	   <animate id="an1" attributeName="opacity" to="1" dur="0.001s" begin="svg1.click;Back5.end+1.5s" fill="freeze" />  
	        <!-- 4. The animation disappearance of the color bars of the opacity to 0 -->
	     <animate id="Back1" attributeName="opacity" to="0" dur="0.001s" begin="Back2.end+0.125s" fill="freeze" />
    </path>	  
  <path class="st1" d="M38.8 68.4L76.6 76.3 78.2 68.7 40.4 60.8 38.8 68.4Z" >
      <animate id="an2" attributeName="opacity" to="1" dur="0.001s" begin="an1.end+0.125s" fill="freeze" /> 
	     <animate id="Back2" attributeName="opacity" to="0" dur="0.001s" begin="Back3.end+0.125s" fill="freeze" />
  </path>	  
    <path class="st1" d="M43.8 50.4L78.8 66.7 82 59.7 47 43.3 43.8 50.4Z" >
       <animate id="an3" attributeName="opacity" to="1" dur="0.001s" begin="an2.end+0.125s" fill="freeze" />
	     <animate id="Back3" attributeName="opacity" to="0" dur="0.001s" begin="Back4.end+0.125s" fill="freeze" />
  </path>	
	
  <path class="st1"  d="M53.5 33.2L83.2 57.9 88.1 52 58.4 27.3 53.5 33.2Z" >
      <animate id="an4" attributeName="opacity" to="1" dur="0.001s" begin="an3.end+0.125s" fill="freeze" />
	    <animate id="Back4" attributeName="opacity" to="0" dur="0.001s" begin="Back5.end+0.125s" fill="freeze" />
  </path>
  
  <path class="st1"  d="M72.7 14.9L66.5 19.5 89.5 50.5 95.7 45.9 72.7 14.9Z" >
     <animate id="an5" attributeName="opacity" dur="0.001s" to="1" begin="an4.end+0.125s" fill="freeze" /> 
	   <animate id="Back5" attributeName="opacity" dur="0.001s" to="0"  begin="an5.end+1s" fill="freeze" />
  </path>	   
  
   <text x="30" y="115" font-size="14px" fill="#BCBBBB" >Click me</text>  
</svg>

回收图标的动画

1. 轮廓绘制基于改变stroke-dasharray参数

2. 从背景颜色到篮子颜色图标的轮廓填充

<path class="st0"  d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" stroke-dasharray="0,123.5 0,123.5" stroke-dashoffset="150"> 
        <!-- Cart outline drawing animation -->
     <animate id="bask" attributename="stroke-dasharray" dur="4s" begin="svg1.click" values="0,123.5 0,123.5;0,0,247,0" fill="freeze" />  
         <!--  Filling  baskets of the icon  color -->
       <animate id="bask_fill"  attributename="fill" dur="1s" begin="bask.end" values="white;#BCBBBB" fill="freeze" />
  </path>   

下面是stackoverflow图标的完整代码

<path class="st0"  d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" stroke-dasharray="0,123.5 0,123.5" stroke-dashoffset="150"> 
        <!-- Cart outline drawing animation -->
     <animate id="bask" attributename="stroke-dasharray" dur="4s" begin="svg1.click" values="0,123.5 0,123.5;0,0,247,0" fill="freeze" />  
         <!--  Filling  baskets of the icon  color -->
       <animate id="bask_fill"  attributename="fill" dur="1s" begin="bask.end" values="white;#BCBBBB" fill="freeze" />
  </path>   

其他配色方案

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 120 120" style="border:1px solid;">
  <style>
    .st0{fill:white; stroke:#BCBBBB; stroke-width:2;}
	.st1{fill:#f48023;opacity:0;}

  </style>
  <path class="st0"  d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z" stroke-dasharray="0,123.5 0,123.5" stroke-dashoffset="150"> 
        <!-- Cart outline drawing animation -->
     <animate id="bask" attributename="stroke-dasharray" dur="4s" begin="svg1.click" values="0,123.5 0,123.5;0,0,247,0" fill="freeze" restart="whenNotActive" />  
	     <!--  Filling  baskets of the icon color -->
	   <animate id="bask_fill"  attributename="fill" dur="1s" begin="bask.end" values="white;#BCBBBB" fill="freeze" restart="whenNotActive" />
  </path>   
   
  
    <path class="st1"  d="M38 86H76.6V78.3H38V86Z"> 
	     <!--  Animation of the appearance of the first color strip -->
		   <!--  Looping appearance, fading bands `begin="bask_fill.end;Back5.end+1.5s` -->
	   <animate id="an1" attributeName="opacity" to="1" dur="0.001s" begin="bask_fill.end;Back5.end+1.5s" fill="freeze" restart="whenNotActive" /> 
	        <!--  Animation of the disappearance of the first color strip -->
	     <animate id="Back1" attributeName="opacity" to="0" dur="0.001s" begin="Back2.end+0.125s" fill="freeze" restart="whenNotActive" />
    </path>	  
  <path class="st1" d="M38.8 68.4L76.6 76.3 78.2 68.7 40.4 60.8 38.8 68.4Z" >
         <!--  Animation of the appearance of the second colored strip -->
	   <animate id="an2" attributeName="opacity" to="1" dur="0.001s" begin="an1.end+0.125s"
     	   fill="freeze" restart="whenNotActive" />     <!--  Animation of the disappearance of the second colored strip -->
	     <animate id="Back2" attributeName="opacity" to="0" dur="0.001s"
    		 begin="Back3.end+0.125s"  fill="freeze" restart="whenNotActive" />
  </path>	  
    <path class="st1" d="M43.8 50.4L78.8 66.7 82 59.7 47 43.3 43.8 50.4Z" >
       <animate id="an3" attributeName="opacity" to="1" dur="0.001s" begin="an2.end+0.125s"
    	   fill="freeze" restart="whenNotActive" />
	     <animate id="Back3" attributeName="opacity" to="0" dur="0.001s"
    		 begin="Back4.end+0.125s" fill="freeze" restart="whenNotActive" />
  </path>	
	
  <path class="st1"  d="M53.5 33.2L83.2 57.9 88.1 52 58.4 27.3 53.5 33.2Z" >
      <animate id="an4" attributeName="opacity" to="1" dur="0.001s" begin="an3.end+0.125s" fill="freeze" />
	    <animate id="Back4" attributeName="opacity" to="0" dur="0.001s" begin="Back5.end+0.125s" fill="freeze" />
  </path>
  
  <path class="st1"  d="M72.7 14.9L66.5 19.5 89.5 50.5 95.7 45.9 72.7 14.9Z" >
     <animate id="an5" attributeName="opacity" dur="0.001s" to="1" begin="an4.end+0.125s" fill="freeze" /> 
	   <animate id="Back5" attributeName="opacity" dur="0.001s" to="0"  begin="an5.end+1s" fill="freeze" />
  </path> 
    <text x="30" y="115" font-size="14px" fill="#BCBBBB" >Click me</text>  
</svg>

.container {
	 width:30vw;
	 height:30vh;
	 }
    .st0{
	fill:#005999;
	stroke:white;
	stroke-width:2;}
	.st1 {
	fill:white;
	opacity:0;
	}