CODEWITHSUNDEEP
aframe
Dan S.
Dan S.

Reputation: 331

How to delay each iteration of a looping a-frame animation with aframe-animation-component

In the included example, there are two animations using practically identical settings, with the exception of <a-animation>'s begin property being swapped with aframe-animation-component's delay.

<a-animation>'s begin property delays the animation in each iteration, which is the desired effect in this case. The aframe-animation-component doesn't seem to mirror this functionality with delay, at least with these settings.

Is this possible using aframe-animation-component without needing to use AFRAME.anime directly?

CodePen Example

Code:

<!-- Using <a-animation> begin -->

<a-box color="red" position="-1 1 -4">
  <a-animation attribute="material.opacity"
             begin="4000"
             from="0.1"
             to="1"
             dur="1000"
             repeat="indefinitely">
  </a-animation>
</a-box>


<!-- Using aframe-animation-component delay -->

<a-box color="red" position="1 1 -4"
     animation="property: material.opacity;
                delay: 4000;
                from: 0.1;
                to: 1;
                dur: 1000;
                loop: true;">
</a-box>

Thanks in advance.

Upvotes: 0

Views: 1181

Answers (1)

Tomasz Bubała
Tomasz Bubała

Reputation: 2153

I looked into aframe-animation-component code (the version you're using) and it seems that the delay is applied before first run of animation. You can either:

  1. Copy the component's code and modify it so it works as you expect it to.

  2. According to this piece of source code from aframe-animation-component:

    onStartEvent: function () {
    // Include the delay before each start event.
    if (this.data.delay) {
      setTimeout(this.beginAnimation, this.data.delay);
      return;
    }
    this.beginAnimation();
  },

    You can use a little workaround. Don't use loop: true, instead use startEvents: your-custom-event. The animation will start every time your-custom-event will be emitted by your entity. In addition, your entity will emit animationcomplete (docs) when animation ends - so you can listen for animationcomplete event and call el.emit("your-custom-event") to trigger it again and again to mock loop: true functionality and achieve desired effect, without modifying original component.

Upvotes: 1

Related Questions