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

【问题标题】：making two animations at once in A-frame在 A 帧中同时制作两个动画
【发布时间】：2021-05-11 08:51:37
【问题描述】：

例如，通过使用相机装置，我想一键从 A 移动到 B，然后从 B 移动到 C。我通常在“onclick”事件中写“to 0 0 0”。

我想同时触发动画“1”和“1_1”。目前只有“1_1”被点击触发。我正在使用来自https://www.npmjs.com/package/aframe-animation-timeline-component的时间线

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

【问题讨论】：

你想把两个动画一个接一个地串起来，还是同时播放两个动画？
一个接一个地串接两个动画，但是知道如何同时播放两个动画也很好。我确实尝试过“延迟”，但效果不佳。 Onclick 事件似乎也只适用于单个动画。如果我知道如何触发“动画时间线”，我认为它会足够灵活，这样我就可以在“动画组”中添加几个动画。
我测试了第二个代码版本glitch.com/edit/#!/chartreuse-stellar-paw我清理了一下。我忘了添加动画时间线组件 javascript。现在动画时间线似乎工作了。但是新代码产生了一个新问题：自动播放。我想像第一个代码一样获得 onclick 事件和非自动播放。
通过添加“startEvents: myTimeline”解决了这个问题。虽然我不明白当我再次单击并且对象来回移动时。动画完成后如何禁用它？或者，我在对象后面添加不可见对象以禁用任何进一步的单击。另一种解决方案。 :D
根据手册，必须在事件部分添加“animationtimelinecomplete”一词（动画时间线完成时发出。事件详细信息包含动画名称（__）。我不确定是什么类型要写多少代码？

标签： javascript animation aframe

【解决方案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>

在另一个动画完成后开始动画

您可以等待一个动画完成并使用一些 javascript 启动另一个动画。

您可以通过animationcomplete__（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>

【讨论】：