当用户将鼠标悬停在实体上时，如何使实体旋转？

Question

我正在使用 event-set-component 来使我的 obj 模型在光标悬停在它上面时增加比例。

这工作正常。

但是我怎样才能让它旋转并增加尺寸呢？

我在 AFrame 文档上找到了以下代码，但我不知道如何实现它，因此它会在鼠标悬停在实体上时触发。

<a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>

Answer 1

正如您在评论中要求使用不同的方法，我建议使用像我写的那样的多用途组件：

AFRAME.registerComponent('event-animate', {
schema: {
    target: {type: 'selector'},
    aevent: {default: 'animation1'},
    triggeraction: {default: 'click'}
},

init: function () {
    var data = this.data;

    this.el.addEventListener(data.triggeraction, function () {
        data.target.emit(data.aevent);
    });
}

});

所以在 HTML 中它看起来像这样：

<a-entity id="object1" 
          event-animate="target:object1;    
          triggeraction:mouseenter; 
          aevent:eventstart">
<a-animation attribute="scale" 
             dur="5000" 
             begin="eventstart" 
             from="1" 
             to ="5" 
             direction="alternate"> 
</a-animation>
<a-animation attribute="rotation" 
             dur="5000" 
             begin="eventstart" 
             from="0 0 0" 
             to="0 360 0" 
             direction="alternate">
</a-animation>
</a-entity>

direction="alternate" 应该让它回到原来的位置。

Answer 2

如果您正确设置了开始事件，则引用的动画将起作用：

<a-animation attribute="rotation"
             dur="2000"
             begin="mouseenter"
             to="0 360 0"
             repeat="1"><a-animation>

在 mouseenter 上，动画触发并旋转实体一次。

---

为了更好地控制你所做的事情，你需要深入制作组件。

1.我能想到的最简单的方法是同时使用动画组件和您自己的。您需要设置一个监听 mouseenter/mousexit 的组件，并触发动画：

AFRAME.registerComponent('mouseenterhandler', {
  init: function () {    
  let el = this.el; //Your element reference
  el.addEventListener('mouseenter, function () {
      // get the rotation, by getAttribute, or by accessing the 
      //object3D.rotation
      let rotation = el.getAttribute('rotation');
      //lets rotate it to the same position
      rotation.y += 360; 
      //set the animation component accordingly:
      el.children[0].setAttribute('to',rotation);
      //emit the 'begin' event:
      el.emit('startrotating');
      });
    }   
});

必要时快速改进：在触发动画时禁用监听器。使用 boolean 打开 mouseenter 事件和 animationend 事件。

2. 可以选择不使用动画组件，如果光标在上面，检查tick()。如果是这样，将元素旋转实际Rotation.y+0.1（或任何其他所需的旋转）。
如前所述，您可以通过 getAttribute() 或 el.object3D.rotation 访问旋转。

---

至于缩放，如果您需要在 mouseenter 事件上旋转 + 重新缩放对象，只需添加另一个动画，然后像我在旋转中那样使用它。
我不确定通常是如何完成的，根据我的经验，动画很好，当没有那么多交互时，因为它们有时会做意想不到的事情，你必须预测/发现，并防止。
另一方面，如果旋转增量太大，手动制作任何动画（更改刻度上的属性）可能会显得迟钝。
您需要尝试一下，找出最适合您的动画。