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

Question

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

Answer 1

让我们尝试 delay 方法 - 使用自定义组件进行一些管理:)

---

假设您有这样的设置（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 ...

所有物品都有一些属性/组件：

• class 属性使它们易于抓取并与任何其他实体区分开来。
• animation 组件将使它们具有动画效果 - 重要的是：startEvents - 在这里我们将抛出将同时在所有盒子上发出的事件，delay - 所以每个下一个盒子将在移动前等待。
• 这个 foo 组件 - 我们将 make it by ourselves。它将检测到鼠标点击，并在所有框上发出go 事件。

所以概念如下：

1. 我们单击一个带有foo 组件的框
2. foo 组件检测到点击并在所有.domino 元素上发出go
3. 所有 .domino 元素都应该一个接一个地开始动画 - 但每个元素都比前一个元素晚 200 毫秒。

---

现在让我们制作自定义组件。请记住，它必须在之前定义<a-scene>:

<script src='component.js'></script>
<script>
   // component
</script>

<a-scene>
</a-scene>

我们将在 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')
       }
     })
   }
})

实际上 - 就是这样。要查看它的实际效果 - 这里有两个示例 - 在都单击蓝色框时，应该启动动画。

1. Simple delayed animation cascade
2. Domino-like animation