svg animateMotion на слушателе конечного события

Question

У меня есть svg в моем html с путем и кругом (с animateMotion), движущимся вдоль пути.Как определить, когда animationMotion заканчивается, чтобы я мог выполнить задачу?также, как мне сбросить animationMotion - то есть вернуть движущийся круг обратно к началу строки.Ниже мой HTML-код SVG:

<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 - обратите внимание, что это экспериментальная функция , поэтому используйте с осторожностью

Answer 2

верните движущийся круг обратно к началу строки

Этого можно добиться, добавив ключевые кадры в <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>

Answer 3

Я знаю, что это не "определяет, когда это заканчивается", но ваша анимация запускается в течение 6 секунд, как определено этим атрибутом <animateMotion>: dur="6.0s".Таким образом, вы можете добавить немного JavaScript, который делает это:

setTimeout(function, 6000);

И если время изменяется каким-либо образом, вы также можете использовать селектор значения атрибута:

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