Javascript aframe.io：在父更改上设置实体位置的动画

当将实体附加到场景中的另一个父对象时，我尝试为其平滑移动设置动画

有一些插件可以为位置本身的变化设置动画，但不是当位置保持不变时，而是当父对象发生变化时

我需要这个，因为我定义了不同的“点”，实体可以在哪里。现在我想把实体放在其中一个点上，所以我不必计算实体的新位置。没有动画，这个概念就完美了

我当前的动画分辨率如下所示：

• 遍历实体的所有当前父级，并对这些元素的位置向量求和
• 遍历所有父元素和新父元素本身，并对这些元素的位置向量求和
• 减去两个计算向量
• 将实体附加到新的父对象，并添加一个动画，其中

  from

  =生成的偏移向量和

  to=“0”

可以工作，但在某些帧中，元素会闪烁，因为它首先附加到新的父对象（

position=“0 0”

，在新的父对象上尤其如此），它会被绘制，然后动画从

中的
开始，将其放置在旧位置并将其移回
“0 0”

我构建了一个JSFIDLE，它显示了问题：

有人能帮我修一下吗？我也对完全不同的概念持开放态度。提前谢谢你
 这有帮助吗？（基于组件的方法）

HTML:

我今天想出了两个解决方案，效果很好的是：


停留在一个框架上。io

在aframe.io中，这个新概念可以正常工作：
*在当前位置克隆元素
*隐藏原始元素
*将其附加到新的父元素，并将其位置设置为偏移位置以匹配克隆的元素
*显示原始元素
*隐藏克隆的元素
*启动动画

这样，在克隆的帮助下就不可能出现闪烁

function animateParentChange(element, newParent) {
  var newParentParents = newParent.add(newParent.parentsUntil('a-scene'));
  var elementParents = element.parentsUntil('a-scene');

  var oldVector = sumVectors(elementParents);
  var newVector = sumVectors(newParentParents);

  var diff = oldVector.sub(newVector)

  var newPosition = vectorToPosition(diff);
  console.log("newPosition", newPosition);

  $(element).find('a-animate').remove();
  var tempElement = $(element).clone().appendTo(element.parent());
  $(element).attr('visible', 'false').appendTo(newParent).attr('position', diff.toArray().join(' '));
  $(element).append('<a-animation attribute="position" dur="1000" fill="forwards" from="' + diff.toArray().join(' ') + '" to="0 0 0"></a-animation>');
  $(element).attr('visible', true);
  tempElement.remove();
}

函数animateParentChange（元素，newParent）{
var newParentParents=newParent.add（newParent.parentsUntil（'a-scene'））；
var elementParents=element.parentsUntil（'a-scene'）；
var oldVector=SumVector（elementParents）；
var newVector=sumVector（newParentParents）；
var diff=oldVector.sub（newVector）
var newPosition=矢量位置（差异）；
控制台日志（“newPosition”，newPosition）；
$（元素）。查找（'a-animate'）。删除（）；
var tempElement=$（element.clone（）.appendTo（element.parent（））；
$（element）.attr（'visible'，'false'）.appendTo（newParent）.attr（'position'，diff.toArray（）.join（''）；
$（元素）.append（'


切换到纯three.js

但我最终真正做的是切换到纯three.js，用javascript生成的对象替换所有aframe.io

通过这种方式，我可以完全控制渲染的时间。在使用aframe.io时，我发现它非常易于使用（与three.js相比），但没有我需要的那么灵活

我接受必须编写更多行代码，但出于灵活性的代价，我认为这没关系

最后，每个人都应该自己考虑一下，对他来说什么更重要。“嘿，替你回答Paulo。昨天我试过了，这给我的方法带来了同样的问题。”（今天，我从aframe.io切换到pure three.js，以便在渲染时完全打开。A-Frame只是一个three.js框架，因此如果需要手动执行插值等操作，您可以完全访问three.js对象。动画元素有更多的缺陷，这就是为什么它可能会被替换为
document.querySelector('a-box').emit('moveBox');

function animateParentChange(element, newParent) {
  var newParentParents = newParent.add(newParent.parentsUntil('a-scene'));
  var elementParents = element.parentsUntil('a-scene');

  var oldVector = sumVectors(elementParents);
  var newVector = sumVectors(newParentParents);

  var diff = oldVector.sub(newVector)

  var newPosition = vectorToPosition(diff);
  console.log("newPosition", newPosition);

  $(element).find('a-animate').remove();
  var tempElement = $(element).clone().appendTo(element.parent());
  $(element).attr('visible', 'false').appendTo(newParent).attr('position', diff.toArray().join(' '));
  $(element).append('<a-animation attribute="position" dur="1000" fill="forwards" from="' + diff.toArray().join(' ') + '" to="0 0 0"></a-animation>');
  $(element).attr('visible', true);
  tempElement.remove();
}