Завершить событие на неопределенную анимацию?

Question

Я пытаюсь увеличить счетчик каждый раз, когда эта анимация зацикливается:

<a-animation id="mainAnimation" attribute="position" from="2.5 0.5 225" to="2.5 0.5 -225" repeat="indefinite" dur="7500" easing="linear" ></a-animation> 

Анимация никогда не заканчивается, поэтому я не могу вызвать конец анимации, как обычно:

mainAnimation.addEventListener('animationcomplete', function () {
    animationIterations++;
    console.log(animationIterations);
});

Есть ли способ слушать, когда цикл повторяется? Спасибо.

Answer 1

Прежде всего, элемент <a-animation> устарел с 0.9.0 и заменен на animation компонент .

Тем не менее, как насчет того, чтобы дать анимацию одну итерацию, и когда это будет сделано - увеличьте счетчик и запустите анимацию снова

mainAnimation.addEventListener('animationcomplete', (e) => {
    animationIterations++;
    console.log(animationIterations);
    mainAnimation.emit('start')
});

Вам нужно будет определить startEvent дляanimation:

<a-box animation="property: position; to: 1 0.5 -3; startEvents: start;
       dur: 500; loop: 1"></a-box>

Теперь для каждого события animationcomplete просто создайте start для объекта.Проверьте это в этой скрипке.