如何在单击帧中的另一个对象时在对象上启动动画？

Question

我正在WebVR上使用a-frame制作一个项目，其中我已经加载了banner和a-box元素的collada模型。当模型被点击时，我想旋转框的轴。我使用JavaScript，但不是动画，而是直接旋转框，与我们使用框架的动画标签时发生的情况不同。

<script> 
 

 
    function changeView() { 
 
     var view = document.getElementById("float"); 
 
     view.setAttribute("rotation", 
 
     { 
 
      x: 0, 
 
      y: 360, 
 
      z: 0  \t \t 
 
     }); 
 
    } 
 
</script>

<a-scene> 
 
    
 
    <a-assets> 
 
    <a-asset-item id="floatingbanner" src="models/floatingbanner.dae"></a-asset-item> 
 
    </a-assets> 
 
    
 
    <a-entity id="float" collada-model="#floatingbanner" position="-2 2 0" scale="0.3 0.3 0.3" onclick="loaddoc()"> 
 
    </a-entity> 
 

 
    <a-box id="box" position="-1 1.5 0" onclick="changeView()" height=".3" depth=".3" width=".3"></a-box> 
 
    
 
    <a-camera id="view" position="0 0 0"> 
 
      <a-cursor color="black"/> 
 
    </a-camera> 
 

 
<a-scene>

Answer 1

您需要使用<a-animation></a-animation>。

定义动画：

<a-entity> 
    <a-entity position="5 0 0"></a-entity> 
    <a-animation attribute="rotation" 
       dur="10000" 
       fill="forwards" 
       to="0 360 0" 
       begin="startAnimation" 
       repeat="indefinite"></a-animation> 
</a-entity> 

然后emit()的begin事件是这样的：

function changeView() { 
    var view = document.getElementById("float"); 
    view.emit("startAnimation"); 
} 

---

也可以尝试使用该组件系统，通过安装脚本到您的实体：

AFRAME.registerComponent('foo',{ 
    init:function(){ 
    var view = document.getElementById("float"); 
    this.el.addEventListener('click',function(){ 
     view.emit("startAnimation"); 
    }); 
    } 
});