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

【问题标题】：How can I implement an animation motion path in Aframe如何在 Aframe 中实现动画运动路径
【发布时间】：2018-03-18 22:08:48
【问题描述】：

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

我知道这样做的一种方法是将anime.js与Aframe一起使用，但我不知道如何将其导入Aframe。

下面是我想要制作动画的动画序列的代码。如您所见，动画标签遵循起飞和着陆动画序列。但是因为我想让模型动画 onclick 这个过程是不合适的

感谢任何帮助！

 <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>

【问题讨论】：

标签： javascript html animation aframe anime.js

【解决方案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>

【讨论】：