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>

Piotr Adam Milewski · Accepted Answer · 2021-06-30T08:59:47.530

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>

Is there a way to get rid of the JavaScript? I need to add dozens of animations to my scene. I know that usually in A-frame you don't need JavaScript for animations on objects, is it possible to achieve the same result with the camera without any JavaScript? Or if that isn't possible, I can't figure out a way to change the JavaScript to add many animations instead of 2. — Aidan Young, Jun 28 '21 at 19:58
@AidanYoung I've updated my answer with a 'non-javascript' option — Piotr Adam Milewski, Jun 30 '21 at 09:07

A-frame multiple animations with camera

1 Answers1

Linked