Animation 动画组件以及帧中的自定义组件

我尝试使用动画组件沿y轴向实体添加动画，并尝试在自定义组件中沿z轴更改动画的位置。但是，动画组件具有优先权，并且自定义组件中z轴的位置更改不起作用

我想使用动画组件更改沿y轴的位置，并使用自定义组件更改沿z轴的位置

这是我的密码-

<a-entity id="orca" position="4 1 -18" gltf-model="#orca1" static-body animation="property: position.y; dir: alternate; dur: 1000; easing: easeInSine; loop: true; to: -1"  move></a-entity>


AFRAME.registerComponent('move', {
  schema: {
  },
  init: function() {
    this.directionVec3 = new THREE.Vector3(0, 1, 1);
  },

  tick: function(t, dt) {
   var directionVec3 = this.directionVec3;
   var currentPosition = this.el.object3D.position;
    directionVec3.z = dt/1000;
    this.el.setAttribute('position', {
      z: currentPosition.z + directionVec3.z
    }); 

    if (currentPosition.z > 10) {
      this.el.setAttribute('position', {
      z: -14
    });     
  }
 }   
});

AFRAME.registerComponent（'move'{
模式：{
},
init:function（）{
this.directionVec3=新的三个.Vector3（0，1，1）；
},
勾选：函数（t，dt）{
var directionVec3=this.directionVec3；
var currentPosition=this.el.object3D.position；
方向vec3.z=dt/1000；
this.el.setAttribute（'位置'{
z:currentPosition.z+方向向量3.z
}); 
如果（当前位置z>10）{
this.el.setAttribute（'位置'{
z:-14
});     
}
}   
});

---

你能帮忙吗？我选择沿y轴移动的动画组件的唯一原因是，我使用easeInSine获得平滑的正弦曲线移动。

正如您所看到的，动画组件会覆盖您的位置。在这种情况下，可以将零部件应用于父实体以避免碰撞：

<a-entity move>
  <a-entity id="orca" position="4 1 -18" gltf-model="#orca1" static-body animation="property: position.y; dir: alternate; dur: 1000; easing: easeInSine; loop: true; to: -1">
  </a-entity>
</a-entity>

---

如您所见，动画组件会覆盖您的位置。在这种情况下，可以将零部件应用于父实体以避免碰撞：

<a-entity move>
  <a-entity id="orca" position="4 1 -18" gltf-model="#orca1" static-body animation="property: position.y; dir: alternate; dur: 1000; easing: easeInSine; loop: true; to: -1">
  </a-entity>
</a-entity>