Question

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

我知道这样做的一种方法是将anime.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>

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

1 个答案: