0

我已经在 a 上声明了两个动画<a-sky>。第一个设置为激活，click第二个由另一个使用自定义“关闭”事件的 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 方法等待延迟，然后将天空缩小到正常大小。但是，我第二次单击天空对象时，它会播放“关闭”动画而不是“点击”动画，然后一旦延迟过去，它就会播放“点击”动画而不是“关闭”。是什么导致这两个动画在第二次通过时被错误的事件触发。

4

3 回答 3

1

我认为我们必须查看 Closer() 和 Codepen 的代码才能更好地了解正在发生的事情。

虽然我可能建议不要将第一个动画与点击事件联系起来，并将其设置为open. 似乎您不希望在第二次单击后触发该动画，因此您必须保持状态并使用自己的事件。

于 2016-03-30T00:56:40.377 回答
1

我看到的第一个问题是您正在播放由 触发的动画click，然后是由close. 不能保证动画在动画播放click之前已经完成。close您可以在播放之前收听animationendclicka-animation元素close。反之亦然，在播放点击之前检查关闭动画是否正在播放（animation.El.isRunning）。如果你愿意，你也可以通过调用来中断正在运行的动画animationEl.stop()

于 2016-03-30T01:04:06.003 回答
0

我通过一些试验和错误解决了这个问题。似乎定义direction="alternate"中<a-sky>的 导致了意外行为。一旦我将此值切换到forward脚本按预期工作。

于 2016-03-30T02:06:36.823 回答