如何在運動路徑上有效地反轉SVG（SMIL）動畫？

我正在嘗試確定如何有效地反轉此元素上使用animateMotion和d屬性的此SVG動畫（使用SMIL）。我需要動畫以逆時針方向繞着形狀運行。如何在運動路徑上有效地反轉SVG（SMIL）動畫？

當前動畫可以找到here和相關代碼如下。

 <path fill="none" stroke="black" 
     d="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0 
     c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z"/> 

     <rect id="rect" x="0" y="0" width="50" height="20" fill="gray" stroke="black" stroke-width="1" transform="translate(-25, -10)"> 

     <animateMotion path="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0 
     c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z" 
     begin= "0s" dur="2s" repeatCount="1" rotate="auto" fill="freeze"> 

     </rect>

我明白，我可以手動逆轉包括通過MoveTo（M，M），了lineTo（L，L），curveto（C，C），等等

的SVG路徑數據的命令給予的量我需要反轉的路徑座標（除了這個動畫中的路徑座標），我試圖確定是否有更有效的方法來做到這一點。

來源

2015-01-21 jjdewitt

您可以通過使用keyPoints和keyTimes屬性來反轉動畫的方向。

<animateMotion path="..." begin= "0s" dur="2s" repeatCount="1" rotate="auto" 
       fill="freeze" keyPoints="1;0" keyTimes="0;1">

在這裏，我們告訴運動從1（路徑末尾）運行到0（路徑開始）。

這適用於Firefox，但不幸的是不在Chrome中。看起來Chrome是被竊聽的。

更新：

我發現與此有關Chrome的錯誤：https://code.google.com/p/chromium/issues/detail?id=353108

看來，如果CALCMODE是「節奏」 keyTimes壞了（它默認爲）。如果您將其更改爲別的東西，像「線性：動畫正常工作的Chrome也

<animateMotion path="..." begin= "0s" dur="2s" repeatCount="1" rotate="auto" 
       fill="freeze" keyPoints="1;0" keyTimes="0;1" calcMode="linear">

Demo here

Updated Codepen here

。

來源

2015-01-21 08:48:01

如何在運動路徑上有效地反轉SVG（SMIL）動畫？

回答

相關問題