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 animation

Solution 1:

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:

   <scriptsrc="https://aframe.io/releases/1.2.0/aframe.min.js"></script><a-scenecursor="rayOrigin: mouse"><a-boxposition="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:

   <scriptsrc="https://aframe.io/releases/1.2.0/aframe.min.js"></script><script>AFRAME.registerComponent("animation-manager", {
           init: function() {
             // wait for the first animation to finishthis.el.addEventListener("animationcomplete__first", e => {
               // start the second animationthis.el.emit("second")
             })
           }
         })
       </script><a-scenecursor="rayOrigin: mouse"><a-boxposition="0 1 -3"rotation="0 45 0"scale="0.25 0.25 0.25"animation-managercolor="#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>