Question

我的项目基本上是各种各样的块，目标是让块在鼠标悬停时抬起，以及“ a-sky”组件将颜色更改为我设置的任何颜色。每个立方体都会将天空的颜色更改为其颜色。我很难让它工作。我尝试的第一件事是将动画设置为a-sky组件，并使其从事件开始。然后，当块开始悬停时，我在块动画中使用了Javascript来触发事件。这是我在下面的Glitch链接中所拥有的内容，代码也在下面

https://glitch.com/edit/#!/join/b3c644bf-cbf9-4d26-80f4-cb6e5a00a556

 <!-- Sky -->
 <a-sky id="sky" color="beige" geometry="">
<a-animation attribute="color" begin="Normal" to="beige" dur="1000"></a-animation>
<a-animation attribute="color" begin="Orange" from="beige" to="#ff7400" dur="1000"></a-animation>
<a-animation attribute="color" begin="Dark-Yellow" from="beige" to="#ffe50a" dur="1000"></a-animation>

<!-- Orange Block -->
<a-box id="Orange-Box" color="#ff7400" navigate-on-click="url:http://google.com" position="0 1.5 -5" material="" geometry="">
    <a-animation attribute="position" from="0 1.5 -5" to="0 2.5 -5" begin="mouseenter">
    <script> document.querySelector('#sky').emit('Orange'); </script>
  </a-animation>
  <a-animation attribute="position" from="0 2.5 -5" to="0 1.5 -5" begin="mouseleave">
    <script> document.querySelector('#sky').emit('Normal'); </script>
  </a-animation>
</a-box>

<!-- Dark Yellow Block-->
<a-box color="#ffe50a" position="2.5 1.5 -4" rotation="0 -33.11696055856158 0" material="" geometry="">
    <a-animation attribute="position" from="2.5 1.5 -4" to="2.5 2.5 -4" begin="mouseenter">
    <script> document.querySelector('#sky').emit('Dark-Yellow'); </script>
  </a-animation>
  <a-animation attribute="position" from="2.5 2.5 -4" to="2.5 1.5 -4" begin="mouseleave">
    <script> document.querySelector('#sky').emit('Normal'); </script>
  </a-animation>
</a-box>

Answer 1

您必须向<a-animation>元素添加事件侦听器，以获取动画结束的时刻

document.querySelector("#animation_component").addEventListener("animationend", (e) => {
  document.querySelector('#sky').emit('Normal');
})

就像我做了here。

如何通过动画设置事件来更改<a-sky>颜色

1 个答案: