A-frame multiple animations with camera

Question

I have some code for a camera using A-frame (https://aframe.io) and I'm wondering how I can add multiple sequential animations. I would like it so that when my first animation is finished, another animation will trigger and the camera will move 5 spaces to the left after the first animation is complete. How can this be done? My current code:

<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

You can use the fact that

• any animation can be started by emitting an signal defined in the startEvents property
• you can determine when an animation has ended by listening to the animationcomplete event.

You can use the animationcomplete signal in the startEvents property, to chain the animations:

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

---

Or if you want a little bit more control over them, you can make a "manager" for your animations:

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