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

Question

例如，通过使用相机装备，我想只需单击一下即可从 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

中找到

Answer 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__位之后的'name'字符串）事件结束.

然后你可以发出信号，启动第二个动画：

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

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

making two animations at once in A-frame

javascript

animation

aframe