repeat for multiple Animation Steps (= repeat Group) [enhancement] about animatepaper.js

[camille-hdl]

Hi,

this is definitely an interesting proposal.

Your ID system could do the trick but maybe we could instead add a higher lever function animatePaper.sequence(), which would be more flexible.
A sequence being a collection of animations, similar to animatePaper.animate([]) but with more options such as repeat, callbacks, etc.
The API would be something like:

const mySequence = animatePaper.sequence({
      repeat: 2,
      complete: () => { /*...*/},
      steps: [ /* animations */ ]
});
mySequence.run(item);

And, to achieve your fadeIn/pulse/fadeOut combo, the idea would be to nest sequences:

const pulseSequence = animatePaper.sequence({
    repeat: 2,
    steps: [
        {
        properties: {
            scale: 1.5,
        },
        settings: {
            duration: 100
        }
    },
    {
        properties: {
            scale: 1,
        },
        settings: {
            duration: 900
        }
    }
    ]
});
const mySequence = animatePaper.sequence({
    complete: () => { console.log('sequence complete'); },
    steps: [
    { // animation
        {
        properties: {
            opacity: 1,
        },
        settings: {
            duration: 500,
        }
    },
    pulseSequence, // nested sequence
    // ... fadeOut animation ...
    ]
});
mySequence.run(item);

Kind of an enhanced version of the effects API.
What do you think ?

[s-light]

Hi your sequence idea is cool :-)
i have done something 'similar' to allow animation of multiple objects at once with the MultiAnimation Class
Usage example at: animation_arrows.js#L187
usage of svg/json auto-import
live example with svg/json auto-import (hit space to toggle)

i also like the nested sequence idea that is by fare the flexible solution..
what do you think about the next() function to skip/switch to the next sequence step?