Animation 如何从单击一个对象开始制作多个动画？

我最近开始学习a-frame，我正在尝试创建一个多米诺效应类型的东西。我希望在单击第一个对象后开始所有动画。我尝试过使用延迟，但延迟会立即开始，而不是在我启动动画之后。如果有人单击“对象1”，对象2的动画将在不久后启动，我该如何做到这一点？

让我们尝试延迟方法-使用自定义组件进行一些管理：

假设您有一个类似以下html伪代码的设置：

<a-box class='domino' foo animation='startEvents: go; ...
<a-box class='domino' animation='startEvents: go; delay: 200 ...
<a-box class='domino' animation='startEvents: go; delay: 400 ...

我们将实现init函数中的所有逻辑，这是在初始化时调用的

// component definition 
AFRAME.registerComponent('foo', {

  // this is called upon initialisation
  init: function() {

     // grab all the domino pieces
     var pieces = document.getElementsByClassName('domino')

     // if this one gets pressed...
     this.el.addEventListener('click', e => {

       // ...emit the event on all of them
       for (let piece of pieces) {
         piece.emit('go')
       }
     })
   }
})

事实上，就是这样。要想看到它的动作，这里有两个例子，在这两个例子中，单击蓝色框，应该启动动画

让我们尝试延迟方法-使用自定义组件进行一些管理：

假设您有一个类似以下html伪代码的设置：

<a-box class='domino' foo animation='startEvents: go; ...
<a-box class='domino' animation='startEvents: go; delay: 200 ...
<a-box class='domino' animation='startEvents: go; delay: 400 ...

我们将实现init函数中的所有逻辑，这是在初始化时调用的

// component definition 
AFRAME.registerComponent('foo', {

  // this is called upon initialisation
  init: function() {

     // grab all the domino pieces
     var pieces = document.getElementsByClassName('domino')

     // if this one gets pressed...
     this.el.addEventListener('click', e => {

       // ...emit the event on all of them
       for (let piece of pieces) {
         piece.emit('go')
       }
     })
   }
})

事实上，就是这样。要想看到它的动作，这里有两个例子，在这两个例子中，单击蓝色框，应该启动动画

---

与动画无关，但这似乎是一项有趣的任务。看看。你能不能更详细地解释一下这些东西的用途？特别是第二部分。我对一个框架还很陌生，所以我仍然在学习这方面的很多知识。@Robbie这更好吗？还是我把重点放在了错误的部分：p太完美了！谢谢你的澄清！Robbie很高兴我能帮上忙——还添加了一个类似domino的例子。与动画无关——但这似乎是一项有趣的任务。看看。你能不能更详细地解释一下这些东西的用途？特别是第二部分。我对一个框架还很陌生，所以我仍然在学习这方面的很多知识。@Robbie这更好吗？还是我把重点放在了错误的部分：p太完美了！谢谢你的澄清！“我会尽快奖励奖金的。”Robbie很高兴我能帮上忙——还添加了一个类似domino的例子。