在A帧中同时制作两个动画

Question

例如，通过使用相机钻机，我想从A移动到B，然后B到C，只需一次点击。我通常在事件"onclick“中写"to 0 0”。

我要触发两个动画"1“和"1_1”。目前，只有"1_1“是由点击触发的。我在用https://www.npmjs.com/package/aframe-animation-timeline-component的时间线

我的代码可以在https://glitch.com/edit/#!/winter-deserted-topaz中找到

Answer 1

这个主题是一般性的，所以我将把它分成几个不同的案例：

1. 同时触发两个动画 如果实体中的动画组件共享一个事件(在startEvents中定义)，它们将同时触发：

  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>     <a-scene cursor="rayOrigin: mouse">       <a-box position="0 1 -3" rotation="0 45 0" scale="0.25 0.25 0.25" color="#4CC3D9"         animation\_\_rotation="property: rotation; from: 0 45 0; to: 0 405 0; dur: 4000;        easing: linear; startEvents: click"         animation\_\_scale="property: scale; from: 0.25 0.25 0.25; to: 1.5 1.5 1.5; dur: 2000;        dir: alternate; easing: linear; loop: 2; startEvents: click">       </a-box>     </a-scene>

1. 在另一个动画完成后启动动画， 您可以等待一个动画完成，然后使用一些javascript启动另一个动画。 您可以确定动画是否以_结束(ID是_animation___位后面的“名称”字符串)。 然后，您可以发出一个信号，启动第二个动画：

  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>     <script>       AFRAME.registerComponent("animation-manager", {         init: function() {           // wait for the first animation to finish           this.el.addEventListener("animationcomplete\_\_first", e => {             // start the second animation             this.el.emit("second")           })         }       })     </script>     <a-scene cursor="rayOrigin: mouse">       <a-box position="0 1 -3" rotation="0 45 0" scale="0.25 0.25 0.25" animation-manager color="#4CC3D9"        animation\_\_first="property: rotation; from: 0 45 0; to: 0 405 0; dur: 2000;        easing: linear; startEvents: click"        animation\_\_second="property: scale; from: 0.25 0.25 0.25; to: 1.5 1.5 1.5; dur: 2000;        dir: alternate; easing: linear; loop: 2; startEvents: second">       </a-box>     </a-scene>