如何在單擊幀中的另一個對象時在對象上啓動動畫？

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"); 
    }); 
    } 
});