不正なイベントによってAframeアニメーションがトリガーされる

Question

<a-sky>で2つのアニメーションが宣言されました。最初はclickで有効に設定され、2番目はカスタムの 'close'イベントを使用して別のjavascriptファイルによってトリガーされます。

次のように私は私の空を定義した：

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

すべてが通じ正しく初めてを実行し、私は空のオブジェクトをクリックすると、それはサイズにスケーリングされます。 Closerメソッドは、遅延を待ってから、空を元のサイズに縮小します。しかし、2回目の空オブジェクトをクリックすると、「クリック」アニメーションではなく「閉じる」アニメーションが再生され、遅延が経過すると「閉じる」ではなく「クリック」アニメーションが再生されます。 2つ目のパススルーで間違ったイベントによってこれらの2つのアニメーションが発生する原因は何ですか。

Answer 1

私は、Closer（）とCodepenのコードが何が起こっているのかをよりよく理解する必要があると思います。

最初のアニメーションをclickイベントに関連付けて、openのようにすることをおすすめします。 2回目のクリック後にアニメーションをトリガしたくないと思われるので、状態を保存して独自のイベントを使用する必要があります。

Answer 2

私が最初に気づくのは、clickでトリガーされたアニメーションを再生してから、closeでトリガーしたアニメーションです。 closeアニメーションが再生される前にclickアニメーションが終了したという保証はありません。 closeを再生する前に、a-animation要素のanimationendを聴くことができます。そして、逆の場合は、クリックアニメーションを再生する前に、閉じるアニメーションが再生されているかどうかを確認します（animation.El.isRunning）。 animationEl.stop()

Answer 3

私はいくつかの試行錯誤でこれを解決しました。 <a-sky>の定義内のdirection="alternate"が予期しない動作を引き起こしていたようです。この値をforwardに変更すると、スクリプトは期待通りに機能しました。