Skip to content

making two animations at once in A-frame

For example, by using camera rig, I want to move from A to B then B to C in just one single click. I normally write “to 0 0 0” in the event “onclick”.

I want trigger both animations “1” and “1_1”. At the moment it is only the “1_1” that is triggered by a click. I’m using a timeline from https://www.npmjs.com/package/aframe-animation-timeline-component

My code can be found in https://glitch.com/edit/#!/winter-deserted-topaz

Answer

The topic is general, so I’ll split it into separate cases:

  1. Firing two simultaneous animations

    If the animation components within an entity share an event ( defined in startEvents ) they will all fire at once:

        <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>
  2. Starting an animation after another one is finished

    You can wait for one animation to finish and start another one with a bit of javascript.

    You can determine if an animation has ended with the animationcomplete__(ID is the ‘name’ string after the animation__ bit) event.

    Then you can emit a signal, which starts the second 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>