AFRAME动画-如何重复使用动画

问题描述

我想要这样的不规则动画（在水滴的情况下）：

滴灌

没事

滴灌

没事

有没有办法做到这一点，或者循环播放很长的滴水动画？

解决方法

如何创建用于管理动画的自定义组件？

如果您使用的是animation component-您可以提供一个事件名称，该事件名称将触发动画：

<a-sphere id="driplet" animation="...; startEvents: drip">

现在，您要“排队”动画：播放，等待，播放，播放，等待。因此，通过使用固定的interval来发出drip事件或等待：

AFRAME.registerComponent("foo",{
  init: function() {
    // the mentioned "queue"
    const animationQueue = ["drip","","drip",""]

    // grab the animations interval
    var interval = this.el.getAttribute("animation").dur

    // we'll use this to know where we are in the queue
    var animationIdx = 0;

    // set the event cycle
    var intervalIdx = setInterval(e => {
       // emit the event from the queue
       this.el.emit(animationQueue[animationIdx])

       // set the animationIdx to the 'next' item in queue
       if (animationIdx < animationQueue.length - 1)
         animationIdx++;
       else
         animationIdx = 0;
    },interval);      
  }
})

在this fiddle中查看

我发现做“跟踪”动画之类的最简单方法之一就是使用这个稳定的存储库

https://github.com/protyze/aframe-alongpath-component

沿着路径设置水滴，并使用自己固定的x，y，z坐标为它们设置动画。将我的马的x，y，z更改为垂直。除非您想做更复杂的事情，否则我相信这是一种简单的方法。

<head>
    <script src="aframe-master/dist/aframe-v1.0.4.min.js"></script>
    <script src="aframe-alongpath-component-master/dist/aframe-alongpath-component.min.js" ></script>
    <script src="aframe-curve-component-master/dist/aframe-curve-component.min.js"></script>
</head>
...

<body>
<a-assets>
        <a-asset-item id="horse" src="assets/gltf/Horse_Free.glb" shadow="receive: false"></a-asset-item>

...
    <a-curve id="tracA" >
        <a-curve-point position="0 1 8" geometry="height:0.1;width:0.1;depth:0.1" material="color:#ff0000" curve-point="" visible="false"></a-curve-point>
        <a-curve-point position="5 1 6" geometry="height:0.1;width:0.1;depth:0.1" material="color:#ff0000" curve-point="" visible="false"></a-curve-point>  
        <a-curve-point position="7 1 0" geometry="height:0.1;width:0.1;depth:0.1" material="color:#ff0000" curve-point="" visible="false"></a-curve-point>
        <a-curve-point position="5 1 -5" geometry="height:0.1;width:0.1;depth:0.1" material="color:#ff0000" curve-point="" visible="false"></a-curve-point>
        <a-curve-point position="0 1 -7" geometry="height:0.1;width:0.1;depth:0.1" material="color:#ff0000" curve-point="" visible="false"></a-curve-point>
        <a-curve-point position="-6 1 -5" geometry="height:0.1;width:0.1;depth:0.1" material="color:#ff0000" curve-point="" visible="false"></a-curve-point>  
        <a-curve-point position="-8 1 0" geometry="height:0.1;width:0.1;depth:0.1" material="color:#ff0000" curve-point="" visible="false"></a-curve-point>
        <a-curve-point position="-6 1 6" geometry="height:0.1;width:0.1;depth:0.1" material="color:#ff0000" curve-point="" visible="false"></a-curve-point>
        <a-curve-point position="0 1 8" geometry="height:0.1;width:0.1;depth:0.1" material="color:#ff0000" curve-point="" visible="false"></a-curve-point>
    </a-curve>

    <a-entity id="sittingDuckA" gltf-model="#horse" alongpath="curve:#tracA;loop:true;dur:12000;rotate:true" scale="" position="-4.27 1 -6" shadow="receive:false" rotation="-24 -90 90"></a-entity>

</scene>
</html>

aframe javascript