CODEWITHSUNDEEP
javascriptaframe
ry kim
ry kim

Reputation: 103

AFRAME animations-- How to reuse animations

I want an irregular animation like this(This is in case of a waterdrop):

Drip

nothing

Drip

Drip

Drip

nothing

nothing

Is there a way to do this or loop a really long animation of dripping?

Upvotes: 0

Views: 104

Answers (2)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

How about creating a custom component for managing the animation?

If you are using the animation component - you can provide an event name, which will trigger the animation:

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

Now you want to "queue" the animations: play, wait, play, play, wait. So lets do so by using a fixed interval to either emit the drip event, or wait:

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);      
  }
})

Check it out in this fiddle

Upvotes: 2

user3395061
user3395061

Reputation: 11

One of the simplest ways I have found to do things like "tracked" animation is by using this stable repository

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

Setup your water droplets alongpath and animate them with your own fixed x,y,z coordinates. Change my x,y,z's for the horse into a vertical. Unless you want to do something more complex, this I believe is one simple way.

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

Upvotes: 1

Related Questions