如何在 Aframe 中实现动画运动路径

Question

我想实现一个由光标onclick事件启动的动画运动路径。

我知道一种方法是使用动漫.js与 Aframe 一起使用，但我不知道如何将其导入 Aframe。

下面是我要制作动画的动画序列的代码。如您所见，动画标签遵循起飞和着陆动画序列。但是因为我希望模型在点击时进行动画处理，所以这个过程不适合

感谢任何帮助！

 <a-entity id="spaceship" cursor-animator gltf-model=#lol position="-20 0 -5" scale="2 2 2" rotation="0 180 0">
        <a-animation attribute="position" from="-20 0 -5" to="-20 0 -25" dur="5000"></a-animation>
        <a-animation attribute="position" from="-20 0 -25" to="-20 1000 -200" delay="5000" dur="9000"></a-animation>
        <a-animation attribute="rotation" from="0 180 0" to="0 0 0" delay="14000"></a-animation>
        <a-animation attribute="position" from="-20 1000 -200" to="-20 0 -25"  delay="15000" dur="9000"></a-animation>
        <a-animation attribute="position" from="-20 0 -25" to="-20 0 -5" delay="24000" dur="8000"></a-animation>
        <a-animation attribute="rotation" from="0 0 0" to="0 180 0" delay="25000" dur="8000"></a-animation> 
    </a-entity> 

Answer 1

路径组件可能会有所帮助：https://github.com/protyze/aframe-alongpath-component

它看起来没有触发事件，所以你可以做的是

setAttribute('alongpath', {curve: '#track1'})点击事件，使其在此时开始。

<a-curve id="track1">
  <a-curve-point position="-2 2 -3"></a-curve-point>
  <a-curve-point position="0 1 -3"></a-curve-point>
  <a-curve-point position="2 2 -3"></a-curve-point>
</a-curve>
<!-- this would move once you add the component via setAttribute in the click function -->
<a-box></a-box>