I have 4 animations on a model that run one after the other and I want them to loop when the cycle is finished.
Here's the animations:
<a-entity id="boat" gltf-model='#boat-model' position='41.127 -1.283 -17.508' scale='0.1 0.1 0.1'
rotation='0.001 -86.510 0.009' castShadow='true' receiveShadow='true' animation-manager
animation__first="property: position; to: 41.127 -1.283 -79.642; dur: 10000; easing: linear; loop: false; startEvents: first"
animation__second="property: rotation; to: 0.001 87.541 0.009; dur: 5000; easing: linear; loop: false; startEvents: second"
animation__third="property: position; to: 41.127 -1.283 -17.508; dur: 10000; easing: linear; loop: false; startEvents: third"
animation__fourth="property: rotation; to: 0.001 -86.510 0.009; dur: 5000; easing: linear; loop: false; startEvents: fourth">
</a-entity>
And here's the animation-managar:
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")
});
this.el.addEventListener("animationcomplete__second", e => {
// start the second animation
this.el.emit("third")
});
this.el.addEventListener("animationcomplete__third", e => {
// start the second animation
this.el.emit("fourth")
});
this.el.addEventListener("animationcomplete__fourth", e => {
// start the second animation
this.el.emit("first")
});
}
})
You don't start the first animation, so nothing happens. Also You can feed the events directly into the animation component:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-box color="red" position='4.127 -1.283 -5.508' scale='0.4 0.4 0.4' rotation='0.001 -86.510 0.009' castShadow='true' receiveShadow='true'
animation__first="property: position; to: -4 -1 -5; dur: 1000; startEvents: loaded, animationcomplete__fourth"
animation__second="property: rotation; to: 0 360 0; dur: 1000; startEvents: animationcomplete__first"
animation__third="property: position; to: 4 -1 -7; dur: 1000; startEvents: animationcomplete__second"
animation__fourth="property: rotation; to: 0 0 360; dur: 1000; startEvents: animationcomplete__third">
</a-box>
<a-sky color="#ECECEC"></a-sky>
</a-scene>Though I prefer a component to throw in stuff in between