时间戳

首页 > 解决方案 > 无限期动画结束事件？

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

问题描述

每次此动画循环时，我都试图增加一个计数器：

<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);
});

循环重复时有什么方法可以收听吗？谢谢。

标签： javascriptanimationaframe

解决方案

首先，<a-animation>从 0.9.0 开始不推荐使用 element 并由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中检查一下。

推荐阅读