Loop a sequence of animations in aframe

0
Asked by : melany wijngaard 2020-03-12 17:34

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")
      });
    }
  })

1 Answers

0 votes
0
greta van limpt
Answer by : greta van limpt

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


Related Posts
Related Posts
1
Animation delayed because of scroll boun...
jeanne nelson jeanne nelson
2020-04-05  3:34am 2020-04-05 3:34am
2
Move multi-select list with JavaScript...
noélie roux noélie roux
2020-03-20  11:41pm 2020-03-20 11:41pm
3
Reset form method not working in timepic...
joan vega joan vega
2021-01-05  5:36am 2021-01-05 5:36am
4
Using JS, how to implement an e-commerce...
marcus andersen marcus andersen
2021-09-27  8:22am 2021-09-27 8:22am
5
How to wait for cypress command to finis...
sara johansen sara johansen
2020-07-06  5:40pm 2020-07-06 5:40pm