如何从javascript触发AFrame动画到特定位置？答案

【问题标题】：How to trigger AFrame animation to specific location from javascript?如何从javascript触发AFrame动画到特定位置？
【发布时间】：2016-12-24 02:31:21
【问题描述】：

例如，您将如何实现：单击一个立方体并基于先前定义的 JS 变量（称为点“p”），另一个立方体移动（动画）到该点“p”？换句话说，有没有办法动态定义和激活 AFrame 动画？非常感谢。

【问题讨论】：

标签： animation aframe webvr

【解决方案1】：

您可以在目标框下方添加<a-animation> 元素。 Animation-A-Frame

<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.3.2/aframe.min.js"></script>
<!DOCTYPE html>  
<html>  
<head>
<title>move animation</title>
<script>
AFRAME.registerComponent("move",{
schema : {
  target : { type : "selector"},
  position : {type : "string"}
},
init : function(){
	this.el.addEventListener("click",function(){
            var animation = document.createElement("a-animation");
            animation.setAttribute("attribute","position");
            animation.setAttribute("to",this.data.position);
            animation.setAttribute("dur","1000");
            animation.setAttribute("repeat","0");
            this.data.target.appendChild(animation);
	}.bind(this));
}

});
  </script>
</head>
<body>
<a-scene>
  <a-camera  position="0 0 0" universal-controls>
    <a-entity id="cursor" cursor="fuse: true;fuseTimeout:500"
    	material="color:black"
    	geometry="primitive:ring"
    	position="0 0 -1"
    	scale="0.01 0.01 0.01"
    ></a-entity>
  </a-camera>
<a-box id= "blue_box" position="0 1 -2" color="blue" ></a-box>
<a-box position="1 1 -2" color="red" move="target:#blue_box;position:-1 0 -5"></a-box>
</body>
</html>

【讨论】：