javascript - 无限期动画结束事件？

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 取代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 。