无限期动画结束事件？

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>

动画从不 'ends' 所以我不能像往常一样调用动画结束:

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

有什么方法可以听循环什么时候重复？谢谢

Answer 1

首先，<a-animation> 元素从 0.9.0 开始被弃用，取而代之的是 animation component。

尽管如此，给动画一次迭代怎么样，当它完成时 - 增加计数器并再次启动动画

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

您需要为动画定义 startEvent：

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

现在在每个 animationcomplete 事件中，只需在实体上发出 start。在 this fiddle.

中查看

无限期动画结束事件？

End event on indefinite animation?

javascript

animation

aframe