如何仅在路径的一部分上使用animateMotion？
如何仅在路径的一部分上使用animateMotion？
提问于 2011-10-07 21:28:24
我有一条路径，我想让一个元素(在本例中是image)沿着这条路径移动。但我只想让它沿着路径的一部分动起来。在那里等待，直到用户交互，然后沿路径的其余部分设置动画。
对于其他动画，您始终可以指定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>回答 2
Stack Overflow用户
发布于 2011-11-08 17:05:53
我一直在尝试做同样的事情，但没有成功。
我不希望你问题中描述的from/to起作用，因为这些属性不合适。
我一直在试验keyTimes和keyPoints，但它们似乎不能正常工作(当在chrome或火狐中查看时)。任何不一致的设置都会破坏动画，而任何一致的设置只会使运动在整个路径上以恒定的速度移动，无论它们设置为什么。
我不确定这是否是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”可以达到预期的目标。
目前，我不得不使用多个路径，并适当地将动画线程在一起，这是复杂和恼人的，但至少它完成了工作。
Stack Overflow用户
发布于 2011-11-11 23:20:10
您是否考虑过将motionpath拆分为两部分，然后更改mpath元素上的xlink:href？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7687946
复制相关文章
相似问题
腾讯云开发者
