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