repeat for multiple Animation Steps (= repeat Group) [enhancement]

[s-light]

hi Eartz, i like your solution for #5 (Support animation "loop") for me currently most of the time i have some small animation sequences that needs to repeat. for example:

• fadein
• pulse (repeat)
  • opacity 0.5
  • opacity 1
• fadeout

so would be great if something like this is supported... as Animation configuration this could look something like this:

animatePaper.animate(item, [
    // fade in
    {
        properties: {
            opacity: 1,
        },
        settings: {
            duration: 500,
        }
    },
    // pulse
    {
        properties: {
            scale: 1.5,
        },
        settings: {
            duration: 100,
            repeatGroupStart: 42,
        }
    },
    {
        properties: {
            scale: 1,
        },
        settings: {
            duration: 900,
            repeatGroupEnd: 42,
            repeat: true,
            complete: () => {
                console.log("loop done :-)");
            }
        }
    },
    // fade out
    {
        properties: {
            scale: 1,
            opacity: 0,
        },
        settings: {
            duration: 500,
            complete: () => {
                console.log("sequence done :-)");
            }
        }
    }
]);

here i have use two new settings: repeatGroupStart and repeateGroupEnd. the idea is to define a repeat group with an id so you can have multiple groups. so if an animation step ends it can check if it contains an repeatGroupEnd setting. If this is true it reads the ID of this and checks if the needed loop_count is reached. if reached it starts the next animation step. If it has to repeat it starts the animation that contains the repeatGroupStart setting. (i think this has to be 'cached/saved' earlier...) with this settings it would also be possible to nest these loops... if an loop repeats infinite you can exit it with a simple next() or end() call - this would mean it just finishes the current running animation steps and exits the infinite loop to do the next step in the list. (internally i think its possible to do this with 'just' setting the repeat count of the innermost running loop to 0.)

This are just 'out of my head' ideas..

pleas let me know if you think it makes sens to include something like this in the library itself or if its better to write something like this on top / externally.

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