我的 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>最佳答案
您可以利用 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所以谨慎使用
关于javascript - svg animateMotion on end 事件监听器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52032210/