Aframe.io:实体在父级变更上的动画位置

Question

当将其附加到场景中的另一个父母时，我正在尝试为实体的平滑移动动画。

那里有一些插件可以使位置本身更改动画，但是当该位置保持不变时，父母正在更改。

我需要这个，因为我定义了不同的"斑点"，实体可以在哪里。现在，我想将实体放入其中一个地点，因此我不必计算实体的新位置。没有动画，该概念效果完美。

我目前对动画的分辨率如下：

• 遍历实体的所有现任父母，并概括这些要素的位置向量
• 遍历所有父母和新父母本身，并概括这些要素的位置向量
• 减去两个计算的向量
• 将实体附加到新父母，并使用 from =生成的偏移量向量和to="0 0 0"

有效，但在某些框架中，元素闪烁，因为它首先将其附加到新父（ position="0 0 0"，因此在新父母上），然后被绘制为绘制，然后动画开始于from将其放在旧的旧父位置并将其移回"0 0 0"。

我构建了一个JSFIDDLE，它显示了问题：https：//jsfiddle.net/fshqghxt/

有人可以帮助我解决这个问题吗？我也开放完全不同的概念。预先感谢您！

Answer 1

这会有所帮助吗？（基于组件的方法）

html：

<a-scene>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-box position="-1 0.5 -3" width="1" height="1" depth="1" color="#4CC3D9" animation="property: position; dir: alternate; loop: true; dur: 1000; to: -1 3 -3; startEvents: moveBox"></a-box>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
    <a-sky color="#ECECEC"></a-sky>
</a-scene>

JS：

document.querySelector('a-box').emit('moveBox');

小提琴

Answer 2

我今天制定了两个解决方案，什么效果很好：

---

留在Aframe.io

在Aframe.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();
}

小提琴：https：//jsfiddle.net/5uc1hn63/

---

切换到纯三。

但是我最终所做的是切换到纯三。

这样，我可以完全控制何时渲染的内容。在与Aframe.io一起工作时，我发现它非常容易使用（相比之下，与三js相比），但不如我需要的那么灵活。

我接受必须编写更多的代码行，但是为了灵活性的价格，我认为这还可以。

最后，每个人都应该自己考虑，对他来说更重要。