Aframe Trigger Animation элемента через компонент события и компонент прокси - PullRequest
Новая
       33

Aframe Trigger Animation элемента через компонент события и компонент прокси

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

Я пытаюсь вызвать анимацию на других элементах, пока просматривается определенный элемент.Так что я пытаюсь достичь: когда я наведу шар, текст должен исчезнуть. А когда я оставлю шар, текст должен исчезнуть.

Мне сказали, что это возможно сaframe-proxy-event-component но я не смог найти ни одного примера или документации о том, как его использовать.

Код выглядит примерно так: 

<script src="https://unpkg.com/aframe-animation-component@5.1.2/dist/aframe-animation-component.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@4.0.0/dist/aframe-event-set-component.min.js"></script>
<script src="https://unpkg.com/aframe-proxy-event-component/dist/aframe-proxy-event-component.min.js"></script>

<a-mixin id="scaleUpMixin" animation__scale="property: scale; dur: 500; easing: easeInOutQuad; to: 1.5 1.5 1.5;"></a-mixin>
<a-mixin id="scaleDownMixin" animation__scale2="property: scale; dur: 500; easing: easeInOutQuad; to: 1 1 1;"></a-mixin>

<a-mixin id="fadeInText" animation__opacity="property: text.opacity; dur: 500; to: 1"></a-mixin>
<a-mixin id="fadeOutText" animation__opacity2="property: text.opacity; dur: 500; to: 0"></a-mixin>

<a-entity rotation="0 -10 0">
    <!-- Planet -->
    <a-sphere color="yellow" position="0 1.8 -5" radius="0.5" scale="1 1 1" 
        mixin="scaleUpMixin scaleDownMixin"
        animation__scale="startEvents: mouseenter;"
        animation__scale2="startEvents: mouseleave;">
    </a-sphere>

    <!-- Text -->
    <a-text id="TextMercury" class="textbox" text="value: Merkur; align: center; color:#FFF" opacity="0" scale="0.8 0.8 0.8"
        position="0 1.8 -1"> </a-text>

</a-entity>

Вот живая демонстрация: https://gorgeous -badge.glitch.me /

Код: https://glitch.com/edit/#!/gorgeous-badge?path=index.html:30:61

Спасибо!

1 Ответ

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

Вам необходимо прикрепить компонент proxy-event к сфере.Это довольно хорошо задокументировано (с примером) @ github

Если у вас есть кнопка, вы можете перенаправить любое событие, например, так: 

<a-box proxy-event="event: event; to: targetSelector; as: newname"></a-box>
<a-entity animation="(...) startEvents: newname"></a-entity>

Проверьте это в эта скрипка .

...