带相机的 A 帧多个动画

Question

我有一些使用 A 帧 (https://aframe.io) 的相机代码，我想知道如何添加多个连续动画。我希望这样当我的第一个动画完成时，另一个动画会触发，并且在第一个动画完成后相机会向左移动 5 个空格。如何才能做到这一点？我当前的代码：

<a-entity id="rig" position="0 1.6 0" animation="property: position; delay: 2000; dur: 7000; easing: linear; to: 0 1.6 -25">
  <a-entity id="camera" wasd-controls camera look-controls></a-entity>
</a-entity>

Answer 1

你可以使用fact那个

• 任何动画都可以通过发出startEvents 属性中定义的信号来启动
• 您可以通过监听animationcomplete 事件来确定动画何时结束。

您可以在startEvents 属性中使用animationcomplete 信号来链接动画：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

  <a-entity id="rig" position="-1 1.6 0" 
            animation__first="property: position; dur: 750; to: 1 1.6 0; 
            startEvents: animationcomplete__second, loaded;" 
            animation__second="property: position; dur: 750; to: -1 1.6 0; 
            startEvents: animationcomplete__first"
    foo>
    <a-entity id="camera" camera look-controls></a-entity>
  </a-entity>
</a-scene>

---

或者，如果您想对它们进行更多控制，可以为您的动画制作一个“管理器”：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      this.signalName = "signalone";
      // when the animation is finished, fire the other one
      this.el.addEventListener("animationcomplete", e => {
        // wait a while and start the other animation
        this.signalName = this.signalName == "signalone" ? "signaltwo" : "signalone";
        setTimeout(e => {
          this.el.emit(this.signalName)
        }, 500)
      })
      this.el.emit(this.signalName)
    }
  })
</script>
<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

  <a-entity id="rig" position="-1 1.6 0" 
            animation__first="property: position; dur: 500; easing: linear; to: 1 1.6 0; startEvents: signalone;" 
            animation__second="property: position; dur: 500; easing: linear; to: -1 1.6 0; startEvents: signaltwo" foo>
    <a-entity id="camera" camera look-controls></a-entity>
  </a-entity>

</a-scene>