基于路径的反向smil动画答案

【问题标题】：Reverse smil animation based on path基于路径的反向smil动画
【发布时间】：2019-07-30 09:57:34
【问题描述】：

我是 SVG 新手，我试图反向运行动画，而不是从头开始。有没有办法使用 SMIL 或者我应该切换到关键帧？

`https://codepen.io/anon/pen/LayQRL`

提前感谢所有帮助！

【问题讨论】：

标签： animation svg smil

【解决方案1】：

您可以像这样使用values 属性而不是to：红色路径是你所拥有的，蓝色路径是使用 3 values

我希望这是你的要求。

svg {
 border:1px solid;
}

<svg width="200" viewBox="0 0 849 681">
       
    <path fill="red" d="M44.2832799,204.535103 C157.481114,264.166986 230.550155,376.259161 263.490405,540.811627 C312.90078,787.640326 488.600718,1162.61771 1328.65457,1020.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z" id="path-2">
      <animate attributeName="d" dur="5000ms" repeatCount="indefinite" to="M44.2832799,.535103 C157.481114,64.166986 100.550155,550.259161 500.490405,700.811627 C812.90078,787.640326 488.600718,1162.61771 1328.65457,953.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z" rotate="auto" keyPoints="1;0">
      </animate>
    </path>
 
</svg>

<svg viewBox="0 0 849 681" width="200">
         
    <path fill="skyblue" d="M44.2832799,204.535103 C157.481114,264.166986 230.550155,376.259161 263.490405,540.811627 C312.90078,787.640326 488.600718,1162.61771 1328.65457,1020.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z" >
      <animate attributeName="d" dur="5000ms" repeatCount="indefinite"
         values="M44.2832799,204.535103 C157.481114,264.166986 230.550155,376.259161 263.490405,540.811627 C312.90078,787.640326 488.600718,1162.61771 1328.65457,1020.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z;
                 
          M44.2832799,.535103 C157.481114,64.166986 100.550155,550.259161 500.490405,700.811627 C812.90078,787.640326 488.600718,1162.61771 1328.65457,953.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z;
                 
          M44.2832799,204.535103 C157.481114,264.166986 230.550155,376.259161 263.490405,540.811627 C312.90078,787.640326 488.600718,1162.61771 1328.65457,1020.992959 C1888.69048,814.909789 1875.38066,525.653653 1288.72512,86.2245504 L44.2832799,204.535103 Z "      
      />
  </path>
  
</svg>

【讨论】：

谢谢，这基本上就是我一直在寻找的。你能指定你分配的 3 个值是什么意思吗？第一个是开始的，第二个是它去的地方，第三个是动画返回的地方吗？
这3个值分别是动画开头、中间和结尾处d属性的值。他的第一个和最后一个是相同的（示例中红色路径的 d 属性）。第二个值是您用于<animate> 元素的to 属性的值。