Question

我的html中包含svg，其中包含一个路径和一个沿路径移动的圆（带有animateMotion）。如何检测animationMotion何时结束，以便执行任务？还有如何重设animationMotion-也就是将移动的圆圈带回到行首。以下是我的svg html代码：

<svg id="cc-line" x="0px" y="0px" viewBox="0 -23 150 55" width="150px" height="55px" xml:space="preserve">
      <path fill="#2471A3" d="M0 0 l150 0" stroke="#2471A3" stroke-width="5"/>
      <circle id="cc-line-circle" cx="0" cy="0" r="8" fill="#2471A3">
        <animateMotion id="cc-line-motion" path="M0 0 l150 0"
 			begin= "0s" dur="6.0s" repeatCount="indefinite" rotate="auto" fill="freeze">
      </circle>
    </svg>

Answer 1

您可以利用onrepeat事件来检测动画周期何时结束，然后在该点运行自定义逻辑/任务。这可以通过javascript通过以下方式实现：

var animationElement = document.querySelector('#cc-line-motion');

animationElement.onrepeat = function() {

  // An animation cycle was completed
  console.log('Task run at end of animation cycle')  
}

这已在Chrome 68中进行了测试-请注意this is an experimental feature，请谨慎使用

Answer 2

我知道这不会“检测它何时结束”，但是您的动画会运行6秒钟，这由<animateMotion>：dur="6.0s"的属性指定。因此，您可以添加一些执行此操作的JavaScript：

setTimeout(function, 6000);

如果时间有任何变化，您也可以使用属性值选择器：

var animationTime = document.getElementById("cc-line-motion").getAttribute("dur");

Answer 3

将移动的圆圈带回到行首

您可以通过将关键帧添加到<animateMotion>中来实现：

keyPoints="0;1;0" keyTimes="0;0.5;1" calcMode="linear"

keyPoints中的三个值代表每个关键帧沿线的分数。 “ 0”表示开始，“ 1”表示结束。

keyTimes中的三个值代表每个关键帧所在的持续时间的一部分。 “ 0”是开始，“ 0.5”是中间，“ 1”是结束。

如何检测animationMotion何时结束以便执行任务？

最好的方法是达克里建议的“ onrepeat”事件。该事件称为“ repeatEvent”

var anim = document.getElementById("cc-line-motion");

var i=0;

anim.addEventListener("repeatEvent", function(evt) {
  console.log("repeat "+(++i));
});

<svg id="cc-line" x="0px" y="0px" viewBox="0 -23 150 55" width="150px" height="55px" xml:space="preserve">
  <path fill="#2471A3" d="M0 0 l150 0" stroke="#2471A3" stroke-width="5"/>
  <circle id="cc-line-circle" cx="0" cy="0" r="8" fill="#2471A3">
    <animateMotion id="cc-line-motion" path="M0 0 l150 0"
 	                 begin="0s" dur="6.0s" repeatCount="indefinite" rotate="auto"
                   keyPoints="0;1;0" keyTimes="0;0.5;1" calcMode="linear"/>
  </circle>
</svg>

结束事件监听器上的svg animateMotion

3 个答案: