如何为SVG动画路径创建连续循环d

Question

您能否建议如何为这种来回动画制作连续循环？

我用开始= “0; animation2.end”，开始= “animation1.end”和repeatCount = “无限期”，但它不工作

<path fill="#D4563D" d="M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 
    c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.307,24.36-21.51,38.384 
    c-2.066,6.898-5.156,50.213-4.626,50.168C368.798,485.174,393.431,468.778,419.252,447.04z"> 
    <animate id="animation1" 
      attributeName="d" 
      attributeType="XML" 
      from="M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 
       c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.307,24.36-21.51,38.384 
       c-2.066,6.898-5.156,50.213-4.626,50.168C368.798,485.174,393.431,468.778,419.252,447.04z" 
      to="M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 
       c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.052,24.439-21.51,38.384 
       c-8.141,25.465,10.927,50.364,11.422,50.168C391.047,471.82,393.431,468.778,419.252,447.04z" 
      dur="1s" 
      /> 
    <animate id="animation2" 
      attributeName="d" 
      attributeType="XML" 
      from="M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 
       c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.052,24.439-21.51,38.384 
       c-8.141,25.465,10.927,50.364,11.422,50.168C391.047,471.82,393.431,468.778,419.252,447.04z" 
      to="M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 
       c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.307,24.36-21.51,38.384 
       c-2.066,6.898-5.156,50.213-4.626,50.168C368.798,485.174,393.431,468.778,419.252,447.04z" 
      dur="1s" 
      begin="1s" /> 
</path> 

Answer 1

你可以在animate元素的values属性中指定动画的几个关键值。它们以分号分隔（如spec states）。这里的诀窍是通过使用三个关键值声明一个从第一个状态到中间状态并回到第一个状态的动画，第一个和最后一个是相同的。将repeatCount属性设置为indefinite后，动画会在两种状态之间不断插值。当然，dur属性必须加倍。

<path fill="#D4563D" d="M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 
    c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.307,24.36-21.51,38.384 
    c-2.066,6.898-5.156,50.213-4.626,50.168C368.798,485.174,393.431,468.778,419.252,447.04z"> 
    <animate 
     attributeName="d" 
     begin="0s" 
     dur="2s" 
     repeatCount="indefinite" 
     values=" 
      M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.307,24.36-21.51,38.384 c-2.066,6.898-5.156,50.213-4.626,50.168C368.798,485.174,393.431,468.778,419.252,447.04z; 
      M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.052,24.439-21.51,38.384 c-8.141,25.465,10.927,50.364,11.422,50.168C391.047,471.82,393.431,468.778,419.252,447.04z; 
      M419.252,447.04c2.804-2.361,5.321-5.14,7.105-8.359c8.168-14.729-2.858-30.388-15.194-38.418 c-7.087-4.613-15.402-7.63-23.878-8.085c-8.877-0.478-20.522,1.64-27.462,7.462c-11.44,9.596-17.307,24.36-21.51,38.384 c-2.066,6.898-5.156,50.213-4.626,50.168C368.798,485.174,393.431,468.778,419.252,447.04z" 
     /> 
</path> 

Answer 2

你应该在第二个动画上使用的第一个动画repeatCount="1"和begin="0s;animation2.end"和begin="animation1.end"。经过测试和工作（在Chrome上）。