如何爲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上）。