CODEWITHSUNDEEP
aframe
MadsenFr
MadsenFr

Reputation: 31

aframe/animation : how to pause and resume?

I have a 360° rotation animation in aframe (ar.js) and I would like to pause and continue it, whereas all that I can do it's pause but restart from the begining.

<a-entity>
    <a-entity
        gltf-model="#tree-gltf">
    </a-entity>
    <a-animation
        begin="rotation-begin"
        end="rotation-end"
        attribute="rotation"
        to="0 360 0"
        direction="alternate"
        dur="10000"
        repeat="indefinite">
    </a-animation>
</a-entity>

Animation documentation give access to "begin" and "end" events, but "begin" restart from the begining and not from the current value when paused.

Entity documentation give access to pause() and play(), which are the same. Play() doesn't work at all if "begin" attribute exist, so you have to choose between events or functions. But play() also restart animation from the begining and not from where the animation was paused.

I also tried an ugly trick by setting attribute "dur" to one hour to slow down animation so it looks like paused, but setting back "dur" to 10 sec doesn't restart it.

Any idea which can help ?

Upvotes: 3

Views: 4238

Answers (1)

geekonaut
geekonaut

Reputation: 5954

Using Kevin Ngo's animation-component helps as it properly supports pause/resume.

Besides including the component, your code will look like this:

<a-entity
    animation="property:rotation; startEvents:rotation-begin; pauseEvents: rotation-pause; resumeEvents: rotation-resume; to:0 360 0; dir:alternate; dur:10000; repeat:indefinite"
    gltf-model="#tree-gltf">
</a-entity>

This will give you three events: rotation-begin, rotation-pause and rotation-resume that you can trigger.

See a demo here

Upvotes: 2

Related Questions