CODEWITHSUNDEEP
javascriptaframe
Rishab Parmar
Rishab Parmar

Reputation: 419

How to fire an Aframe animation-mixer event using Javascript when an animation-clip ends?

I'm initially playing an animation on a .fbx model using don mccurdy's animation-mixer. What I am trying to achieve is that whenever the animation currently playing has finished, an event is fired which will enable a 'Play again' button to be visible. And when I click this button, the animation starts playing again.

But the event button is visible as soon as the animation starts playing and not when the event 'animation-finished' has fired.

Code: 

<html>
    <head>
        <meta charset="utf-8">
        <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
        <script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
        <script src="inflate.min.js"></script>
    </head>
    <body>
        <a-scene>
        <a-sky color="#6EBAA7"></a-sky> 
            <a-entity id="animationPlayer" scale="0.012 0.012 0.012" fbx-model="src: kick.fbx" animation-mixer="clip: *;loop: repeat; repetitions: 2;"></a-entity>
            <a-entity position="0 1.5 3.5"><a-camera></a-camera></a-entity>
            <a-box id="play_again" position="0 3 -1" height=0.5 depth=0.09 visible="false" color="red"></a-box>
            <a-text value="Play again" position="-0.53 3 -0.95"></a-text>
        </a-scene>
        <script>
            document.querySelector("#animationPlayer").addEventListener('animation-finished',function(){
                document.querySelector("#play_again").setAttribute('visible', 'true')
            });
        </script>
    </body>
</html>

So, am I missing something syntactically or is there a logical problem?

Upvotes: 2

Views: 4004

Answers (1)

Beyerz
Beyerz

Reputation: 828

I am assuming the following from the question The button is visible and the model is animated and the button is hidden when the button is clicked. when the animation is complete, the button is returned and the animation is reset.

let button = document.querySelector("#play_again");
let player = document.querySelector("#animationPlayer");
button.addEventListener('click',function(){
  //hide the button
  button.setAttribute('visible','false');

  //add the event listener to handle post animation before starting animations 
  (use once to help with cleanup)
  player.addEventListener('animation-finished',function() {
    button.setAttribute('visible','true');
    player.removeAttribute('animation-mixer');
  },{once:true});

  //start the animation by appending the animation-mixer
  player.addAttribute('animation-mixer',{clip: "*",loop: "repeat", repetitions: 2});
});

Remove the animation=-mixer from the html in start

<a-entity id="animationPlayer" scale="0.012 0.012 0.012" fbx-model="src: kick.fbx"></a-entity>

Upvotes: 2

Related Questions