AFRAME animations-- How to reuse animations

Question

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?

Answer 1

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