如何在HTML A-Frame中设置延迟

Question

我正在学习A-Frame，但找不到任何教程来展示如何在动画之间设置延迟。如何使用尽可能少的代码行完成此操作？

码：

<a-box color=¨#fffff¨position="-5 0 -10" width="2.5" height="1.7" depth="1.7"> 
    <a-animation attribute="position" from="-5 0 -10" to="-14 -0.8 -10" dur="6000">
    </a-animation> 
    <a-animation attribute="rotation" from="0 0 0" to="0 0 10" dur="6000"> 
    </a-animation> 
</a-box>

Answer 1

试试https://www.npmjs.com/package/aframe-animation-timeline-component

或者编写一个触发第一个动画的组件，等待，然后触发第二个动画。

AFRAME.registerComponent('trigger', {
  init: function () {
    this.el.emit('triggerfirst');
    setTimeout(() => {
      this.el.emit('triggersecond');
    }, 300);
  }
});

<a-entity animation__1="startEvents: triggerfirst" animation__2="startEvents: triggersecond" trigger>

如果需要，您也可以让trigger组件等待一个事件。