Question

我有一个路径，我想要一个元素（在这种情况下是图像）的动画。但我只是想让它沿着路径的一部分动画。在那里等待，直到用户进行交互，然后沿着路径的其余部分设置动画。

使用其他动画，您始终可以指定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>

Answer 1

我一直试图做同样的事情而没有成功。

我不希望你问题中描述的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”将达到预期目标。

目前我不得不使用多个路径并将动画合适地组合在一起，这既复杂又烦人，但至少可以完成工作。

Answer 2

您是否考虑将运动路径分为两部分，然后更改mpath元素上的xlink：href？

如何仅在路径的一部分上使用animateMotion？

2 个答案: