Question

我已在<a-sky>上声明了两个动画。第一个设置为在click上激活，第二个由另一个javascript文件触发，使用自定义＆＃39;关闭＆＃39;事件

我按如下方式定义了我的天空：

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

Answer 1

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

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

Answer 2

我看到的第一个问题是你正在播放由click触发的动画，然后是由close引发的动画。在click动画播放之前，无法保证close动画已完成。在播放animationend之前，您可以在点击a-animation元素上收听close。反之，在播放点击动画之前检查是否正在播放关闭动画（animation.El.isRunning）。如果您想通过调用animationEl.stop()

，也可以中断正在运行的动画

Answer 3

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

Aframe动画由不正确的事件触发

3 个答案: