0

I have declared two animations on a <a-sky>. The first is set to activate on click the second is triggered by another javascript file using the custom 'close' event.

I defined my sky as follows:

<a-sky mixin="sky" id="thesky" src="puydesancy.jpg" scale="1 1 -1" radius="1" >

  <a-animation attribute="scale" direction="alternate" begin="click" dur="1000" easing="linear" from="1 1 -1" to="10 10 -10"></a-animation>

  <a-animation attribute="scale" direction="alternate" begin="close" dur="1000" easing="linear" from="10 10 -10" to="1 1 -1"></a-animation>        

</a-sky>

  //This is my click handler which calls Closer()
  (function () {
    var skies = document.querySelectorAll('#thesky');
    var i;
    for (i = 0; i < skies.length; ++i) {
      skies[i].addEventListener('click', function () {
        console.log('click', this);  
        Closer();
      })
    }
  })();

  //This is in the return function of Closer()
  var sphereElement = document.getElementById("thesky");
  sphereElement.emit('close');

Everything runs correctly the first time through, I click on the sky object and it scales in size. The Closer method waits for a delay then shrinks the sky back to it's normal size. However, the second time I click the sky object it plays the 'close' animation instead of the 'click' animation and then once the delay has passed it plays the 'click' animation instead of the 'close'. What is causing these two animations to get fired by the wrong events on the second passthrough.

ngokevin
  • 12,980
  • 2
  • 38
  • 84
Devin
  • 205
  • 2
  • 13

3 Answers3

1

I think we'd have to see the code for Closer() and a Codepen to get a better idea of what's going on.

Though I might recommend not tying the first animation to the click event, and making it something like open. It seems you wouldn't want that animation to trigger after the second click, so you'd have to keep state and use your own event.

ngokevin
  • 12,980
  • 2
  • 38
  • 84
  • Thanks Kevin, Turns out the issue was actually related to setting the `direction="alternate"`, once I switched the value to `forward` it worked as expected. – Devin Mar 30 '16 at 02:05
1

The first problem I see is that you are playing the animation triggered by click and then the animation trigered by close. There's no guarantee that the click animation has finished before the close animation plays. You can listen to the animationend on the click a-animation element before you play the close one. And viceversa, check if the close animation is playing (animation.El.isRunning) before playing the click one. You can also interrupt the running animation if you want to by calling animationEl.stop()

Diego Marcos
  • 4,502
  • 3
  • 15
  • 20
  • Thanks Diego, I've incorporated your feedback and tightened up how I'm handling my animation states. Turns out the issue was actually related to setting the `direction="alternate"`, once I switched the value to `forward` it worked as expected. – Devin Mar 30 '16 at 02:04
0

I solved this one through some trial and error. Seems the direction="alternate" in the <a-sky> definition was causing the unexpected behavior. Once I switched this value to forward the script worked as expected.

Devin
  • 205
  • 2
  • 13