Как изменитьЦвет с событием, установленным анимацией - PullRequest
Новая
       54

Как изменитьЦвет с событием, установленным анимацией

0 голосов
/ 07 октября 2018

Мой проект в основном представляет собой набор блоков, и цель состоит в том, чтобы блоки поднимались при наведении мыши, а также компоненте "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>

1 Ответ

0 голосов
/ 08 октября 2018

Вы должны добавить прослушиватель событий к элементу <a-animation>, чтобы получить момент, когда анимация закончилась 

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

Как и я здесь .

...