Анимировать в рамке сущность при наведении - PullRequest
Новая
       20

Анимировать в рамке сущность при наведении

0 голосов
/ 20 февраля 2019

У меня возникли проблемы с анимацией в элементе / объектах AFRAME.В следующей демонстрации я установил поле и поверх него текстовую сущность, которую нужно анимировать (масштабировать), когда я наведу указатель мыши на поле, в котором текстовый элемент не анимируется и не отображается.Кто-нибудь может помочь?

https://jsfiddle.net/0d6ymk21/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
    <script src="https://rawgit.com/mayognaise/aframe-mouse-cursor-component/master/dist/aframe-mouse-cursor-component.min.js"></script>

  </head>
  <body>
    <a-scene>
      <a-entity id="camera" camera mouse-cursor look-controls>
        <a-cursor fuse="true" color="blue"></a-cursor>
      </a-entity>
      <a-entity
        id="#fernando"
        text="color: black;value: Fernando;"
        scale=".1 .1 .1"
        position="2 1 -2"
      ></a-entity>
      <a-box box position="1 0 -2" color="red" activate-name=""></a-box>
    </a-scene>
  </body>
</html>

- JS: 

AFRAME.registerComponent("activate-name", {
  schema: {
    default: ""
  },
  init: function() {
    var data = this.data;
    var el = this.el;
    var fernando = document.querySelector("#fernando");
    el.addEventListener("mouseenter", function() {
      fernando.setAttribute("scale", "2 2 2");
    });
  }
});

1 Ответ

0 голосов
/ 21 февраля 2019

Здесь два вопроса:

1) Если вы хотите захватить Фернандо, используя document.querySelector('#fernando') - id должно быть fernando вместо #fernando.

2) Объявление компонента - activate-name в этом случае - необходимо сделать до того, как компонент будет прикреплен в html.Вы можете просто бросить его тегом <script> перед сценой 

<script>
  AFRAME.registerComponent('foo', ...
</script>
<a-scene>
  <a-entity foo></a-entity>
</a-scene>

, еще лучше - сохранить его в отдельном файле .js и включить его в <head>.Fiddle здесь .

Это необходимо, поскольку jsfiddle выполняет часть кода при загрузке окна.

...