CODEWITHSUNDEEP
javascriptanimationaframe
TiredEyes
TiredEyes

Reputation: 15

loop a sequence of animations in aframe

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

Upvotes: 0

Views: 949

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14655

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

Upvotes: 2

Related Questions