Afrikanische Animation wird durch falsches Ereignis ausgelöst

Question

Ich habe zwei Animationen auf einer deklariert. Die erste ist aktiviert, um auf click die zweite wird ausgelöst durch eine andere Javascript-Datei mit dem benutzerdefinierten 'schließen' Ereignis.

definiert ich mein Himmel, wie folgt:

<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'); 

Alles läuft beim ersten Mal richtig durch, ich auf den Himmel Objekt klicken und es skaliert in der Größe. Die Closer-Methode wartet auf eine Verzögerung und verkleinert dann den Himmel wieder auf seine normale Größe. Wenn ich jedoch das zweite Mal auf das Himmelsobjekt klicke, wird die "Schließen" -Animation anstelle der "Klick" -Animation abgespielt und nach Ablauf der Verzögerung wird anstelle des "Schließens" die "Klick" -Animation abgespielt. Was bewirkt, dass diese beiden Animationen durch die falschen Ereignisse beim zweiten Passthrough ausgelöst werden.

Answer 1

Ich denke, wir müssten den Code für Closer() und einen Codepen sehen, um eine bessere Vorstellung von dem zu bekommen, was vor sich geht.

Obwohl ich empfehlen könnte, nicht die erste Animation an das Click-Ereignis zu binden, und so etwas wie open. Es scheint, dass Sie nicht möchten, dass diese Animation nach dem zweiten Klick ausgelöst wird, also müssen Sie den Status beibehalten und Ihr eigenes Ereignis verwenden.

Answer 2

Das erste Problem, das ich sehe, ist, dass Sie die von click ausgelöste Animation und dann die von close trigered Animation spielen. Es gibt keine Garantie dafür, dass die click Animation beendet ist, bevor die close Animation abgespielt wird. Sie können die animationend auf dem Klick a-animation Element hören, bevor Sie die close eins spielen. Und umgekehrt, überprüfen Sie, ob die nahe Animation spielt (animation.El.isRunning), bevor Sie die Click-Animation spielen. Sie können die laufende Animation auch unterbrechen, indem Sie animationEl.stop()

Answer 3

aufrufen Ich löste dieses durch einige Versuch und Irrtum. Scheint, dass die direction="alternate" in der <a-sky> Definition das unerwartete Verhalten verursachte. Sobald ich diesen Wert zu forward wechselte, funktionierte das Skript wie erwartet.