animateMotion SVG,延缓? [英] animateMotion SVG, delay?
本文介绍了animateMotion SVG,延缓?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
以下code动画沿特定的#pat路径IMG。
The following code animates the img along the specific #pat path.
<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>
有什么办法来循环动画无限,但有插图中的延迟。像动画0-> 1,等待5秒,动画0-1。
Is there any way to loop the animation indefinitely, but to have a delay inbetween. Like animate 0->1, wait 5s, animate 0-1.
使用这个资源: http://www.w3.org/TR/ SVG11 / animate.html#AnimateMotionElement 。
推荐答案
您可以添加另一个假/暂停元素开始/结束链接...第一个就是暂停并没有真正做什么(所以它当它不是路径上不泯)。
You could add another fake/pause element to link the begin/end...first one is just a pause that doesn't really do anything (so it doesn't vanish when its not on the path).
<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>
这篇关于animateMotion SVG,延缓?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文