2014-03-28 21 views
2

下面的代碼動畫沿特定#pat路徑IMG。animateMotion SVG,延緩?

<switch> 
<g i:extraneous="self"> 
    <path id="pat" style="stroke:url(#grad);" class="mypath" d=" 
     M144.668,123.467c0,0-13.001-133.999-143.668-121.665"/> 
</g> 
</switch> 


<image xlink:href="http://m.kaon.com/icon/17001.png" width="30" height="30" x="-15" y="-15"> 
    <animateMotion rotate="auto" dur="3s" repeatCount="indefinite"> 
    <mpath xlink:href="#pat"/> 
    </animateMotion> 
</image> 

有什麼辦法可以無限循環動畫,但有一個延遲inbetween。像動畫0-> 1,等待5秒,動畫0-1。

使用這種資源:http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement

回答

5

您可以添加另一個假/暫停元的開始/結束鏈接...第一種是隻是一個暫停並沒有真正做什麼(所以它不會消​​失時,它不是路徑上)。

<animateTransform begin="myanim.end" id="pause" dur="3s" type="translate" attributeType="XML" attributeName="transform"/> 

<animateMotion id="myanim" dur="6s" begin="0; pause.end" fill="freeze"> 
     <mpath xlink:href="#theMotionPath"/> 
</animateMotion> 

fiddle