0

で 2 つのアニメーションを宣言しました<a-sky>。click1つ目は、カスタム 'close' イベントを使用して別の JavaScript ファイルによってトリガーされる 2 つ目にアクティブになるように設定されています。

私は自分の空を次のように定義しました。

<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 番目のパススルーで間違ったイベントによって起動される原因は何ですか。

4

3 に答える 3

1

最初の問題は、 によってトリガーされたアニメーションを再生しclick、次にによってトリガーされたアニメーションを再生していることですclose。clickアニメーションが再生される前にアニメーションが終了しているという保証はありませんclose。animationend再生する前にクリックa-animation要素を聞くことができますclose。逆に、クリック アニメーションを再生する前に、クローズ アニメーションが再生されているかどうか (animation.El.isRunning) を確認します。必要に応じて、実行中のアニメーションを中断することもできます。animationEl.stop()

于 2016-03-30T01:04:06.003 に答える