AFRAME动画——如何重用动画

Question

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

点滴

无

点滴

无

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

Answer 1

我发现执行“跟踪”动画等操作的最简单方法之一是使用这个稳定的存储库

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>

Answer 2

如何创建一个自定义组件来管理动画？

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

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

现在您想对动画进行“排队”：播放、等待、播放、播放、等待。因此，让我们使用固定的 interval 来发出 drip 事件，或者等待：

AFRAME.registerComponent("foo", {
  init: function() {
    // the mentioned "queue"
    const animationQueue = ["drip", "", "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

中查看

AFRAME动画——如何重用动画

AFRAME animations-- How to reuse animations

javascript

aframe