由错误事件触发的 Aframe 动画答案

【问题标题】：Aframe animation being triggered by incorrect event由错误事件触发的 Aframe 动画
【发布时间】：2016-07-17 19:11:59
【问题描述】：

我在<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 方法等待延迟，然后将天空缩小到正常大小。但是，我第二次单击天空对象时，它会播放“关闭”动画而不是“点击”动画，然后一旦延迟过去，它就会播放“点击”动画而不是“关闭”。是什么导致这两个动画在第二次通过时被错误的事件触发。

【问题讨论】：

标签： three.js webvr aframe

【解决方案1】：

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

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

【讨论】：

谢谢凯文，原来这个问题实际上与设置direction="alternate"有关，一旦我将值切换到forward，它就按预期工作了。

【解决方案2】：

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

【讨论】：

感谢 Diego，我已经采纳了您的反馈意见，并加强了我处理动画状态的方式。原来这个问题实际上与设置direction="alternate"有关，一旦我将值切换到forward，它就会按预期工作。

【解决方案3】：

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

【讨论】：