如何从单击一个对象开始多个动画? [英] How do you make multiple animations start from clicking one object?

问题描述

我最近开始学习一个框架，我正在尝试创建一个多米诺骨牌效应类型的东西.我希望我的所有动画在我点击第一个对象后开始.我试过使用延迟，但延迟立即开始，而不是在我开始动画之后.如何在有人单击对象 1 后不久开始对象 2 的动画?

I've started learning a-frame recently and I'm trying to create a domino effect type thing. I want all of my animations to start after I click on the first object. I've tried using delay but the delay starts immediately instead of after I start the animation. How do I make it so after someone clicks object 1, object 2's animation would start shortly after?

推荐答案

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

Let's try the delay approach - with a custom component for some managment :)

假设您有这样的设置(html 伪代码):

Lets say you have a setup like this (html pseudocode):

<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 ...

所有项目都有一些属性/组件:

All items have some attributes / components:

• class 属性使它们易于抓取并与任何其他实体区分开来.
• animation 组件将使它们具有动画效果 - 重要的是:startEvents - 在这里，我们将抛出将同时在所有框上发出的事件，延迟 - 所以每个下一个盒子在移动之前都会等待.
• 这个 foo 组件 - 我们将 自己制作.它将检测鼠标单击，并在所有框上发出 go 事件.

• The class attribute to make them easy to both grab and distinguish from any other entities.
• The animation component which will make them animate - whats important: startEvents - here we'll throw the event which will be emitted simultaneously on all boxes, delay - so every next box will wait before moving.
• This foo component - we'll make it by ourselves. It will detect a mouseclick, and emit the go event on all boxes.

所以概念如下:

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

1. We click one box with the foo component
2. the foo component detects the click and emits go on all .domino elements
3. all .domino elements should start their animations one after another - but each one 200ms later than the previous one.

<小时>

现在让我们制作自定义组件.请记住，必须在 之前定义:

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

<a-scene>
</a-scene>

我们将在 init 函数中实现所有逻辑 - 该函数在初始化时调用.

We will implement all logic within the init function - which is called upon initialisation.

// 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')
       }
     })
   }
})

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

and actually - thats it. To see it in action - here are two examples - in both clicking the blue box, should start the animation.

1. 简单的延迟动画级联
2. 类似多米诺骨牌的动画

这篇关于如何从单击一个对象开始多个动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！