如何僅在路徑的一部分上使用animateMotion？

我有一個路徑，我想動畫元素（在這種情況下的圖像）一起。但我只想讓它沿着路徑的一部分進行動畫製作。在那裏等待，直到用戶進行交互，然後沿着路徑的其餘部分對其進行動畫處理。如何僅在路徑的一部分上使用animateMotion？

對於其他動畫，您始終可以指定from和to屬性。我的想法是，你可以做這樣的：

的JavaScript

//user press some key 
animationElement.setAttribute("from", "0.0"); //beginning of path 
animationElement.setAttribute("to", "0.5"); //middle of path 
animationElement.beginElement(); 
... 
//user presses another key 
animationElement.setAttribute("from", "0.5"); //middle of path 
animationElement.setAttribute("to", "1.0"); //end of path 
animationElement.beginElement();

SVG

<path id="myPath" d="m1119,29l-80,137l-601,52l-152,318l-381,218" stroke="#000000" fill="none" pathLength="1" /> 
<image xlink:href="someImage.png" width="231" height="262"> 
    <animateMotion fill="freeze" begin="indefinite" end="indefinite" from="0" to="0.4"> 
    <mpath xlink:href="#myPath" /> 
    </animateMotion> 
</image>

來源

2011-10-07 Johan Leufvén

我一直在試圖做同樣的事情，但沒有成功。

我不希望你的問題中描述的from/to起作用，因爲這些屬性不合適。

我一直在嘗試keyTimes和keyPoints，但這些似乎並不能正常工作（在Chrome或Firefox中查看時）。任何不一致的設置都會破壞動畫，並且任何一致的設置都會使動作在整個路徑上以恆定的速率移動，而不管它們是否設置爲。

我不確定這是否是svg實現中的錯誤。例如： keyTimes =「0; 0.2; 0.3; 0.9; 1」keyPoints =「0; 0.5; 0.6; 0.7; 1」產生整個路徑的平滑移動。如果他們的工作，我認爲keyTimes =「0; 1」keyPoints =「0; 0.5」將達到預期的目標。

目前，我不得不使用多個路徑並將動畫組合在一起，這很複雜且令人討厭，但至少它可以完成工作。

來源

2011-11-08 09:05:52

您是否考慮過將運動路徑分爲兩部分，然後更改mpath元素上的xlink：href？

來源

2011-11-11 15:20:10

如何僅在路徑的一部分上使用animateMotion？

回答

相關問題