РАМКА Анимация в тексте при наведении - PullRequest
Новая
       30

РАМКА Анимация в тексте при наведении

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

https://jsfiddle.net/ykma6r0d/1/

Ссылка на демо ^

HMTL: 

<a-scene>
  <!-- CAMERA CURSOR -->
  <a-entity id="camera" camera mouse-cursor look-controls wasd-controls>
    <a-cursor fuse="true" color="red"></a-cursor>
  </a-entity>
  <a-entity id="myTarget" scale="1 .001 1" look-at="#camera" text="color: black;align: center; value: YAYA!; width: 6; wrap-count: 10" animation__1="startEvents: in;property: scale; dur: 200; from: 1 .001 7; to: 1 1 1" animation__2="startEvents: out;property: scale; dur: 200; from: 1 1 1; to: 1 .001 1"></a-entity>
  <a-circle name-on-hover="target: #myTarget" position="-2 0 -10" material="color: blue" material="opacity:.75" look-at="#camera" animation="property: position;easing: easeInSine;loop:true;dir: alternate;dur: 2000;to:-2 .2 -10">
  </a-circle>
</a-scene>

JS: 

AFRAME.registerComponent("name-on-hover", {
  schema: {
    target: {
      type: "selector",
      default: ""
    }
  },
  init: function() {
    var target = this.data.target;
    var el = this.el;
    this.setupNamePos();
    el.addEventListener("mouseenter", function() {
      target.emit("in"); // animate in
    });
    el.addEventListener("mouseleave", function() {
      target.emit("out"); // animate out
    });
  },
  setupNamePos: function() {
    var name = this.data.target; // get name element
    var elPos = this.el.getAttribute("position"); // get the pos of hovered element

    name.setAttribute("position", {
      //set name position relevant to hovered element
      x: elPos.x,
      y: elPos.y + 2,
      z: elPos.z
    });
  }
});

У меня есть два элемента,круг и текстовый элемент

круговой элемент: текст над ним необходимо анимировать при наведении курсора.В моем JS он установлен так, что он захватывает положение круга, а затем устанавливает это положение для моего текстового элемента, но перед этим он увеличивает позицию Y на 2 единицы.

По некоторым причинам,моя анимация выглядит как сумасшедшая, когда я наводю курсор мыши на круг.Сначала я подумал, что это может быть потому, что текстовый элемент перекрывает круг, теряя событие hover.Однако я попытался переместить текстовый элемент в другое место, также изменив X и Z ... но не повезло.

1 Ответ

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

Когда текст расширяется, он становится на пути курсора raycaster - и mouseleave испускается.

Вы можете ограничить объекты, на которые курсор может щелкнуть, используя свойство objects. 

<a-cursor objects='clickable'> </a-cursor>

скрипка здесь .

...