anime icon indicating copy to clipboard operation
anime copied to clipboard

Keyframe repeat

Open Cqmille opened this issue 4 years ago • 2 comments

Hello,

I'm using the following code to randomly move an image on screen. Is there a way to tell "I want the same keyframes x times" instead of duplicate my code lines ?

Thanks a lot

function letAnimate(){

    const maxX=1100,maxY=-450; //Animation area

    let animation = anime({
        targets: '#jeanmichel',
        // Properties 
        keyframes: [
            {translateY: Math.floor((Math.random() * maxY) + 1), translateX: Math.floor((Math.random() * maxX) + 1)},
            {translateY: Math.floor((Math.random() * maxY) + 1), translateX: Math.floor((Math.random() * maxX) + 1)},
            {translateY: Math.floor((Math.random() * maxY) + 1), translateX: Math.floor((Math.random() * maxX) + 1)},
            {translateY: Math.floor((Math.random() * maxY) + 1), translateX: Math.floor((Math.random() * maxX) + 1)},
            {translateY: Math.floor((Math.random() * maxY) + 1), translateX: Math.floor((Math.random() * maxX) + 1)},
            {translateY: Math.floor((Math.random() * maxY) + 1), translateX: Math.floor((Math.random() * maxX) + 1)},
            {translateY: Math.floor((Math.random() * maxY) + 1), translateX: Math.floor((Math.random() * maxX) + 1)},
            {translateY: Math.floor((Math.random() * maxY) + 1), translateX: Math.floor((Math.random() * maxX) + 1)},
            {translateY: Math.floor((Math.random() * maxY) + 1), translateX: Math.floor((Math.random() * maxX) + 1)},
            {translateY: Math.floor((Math.random() * maxY) + 1), translateX: Math.floor((Math.random() * maxX) + 1)},
            {translateY: Math.floor((Math.random() * maxY) + 1), translateX: Math.floor((Math.random() * maxX) + 1)},
            {translateY: Math.floor((Math.random() * maxY) + 1), translateX: Math.floor((Math.random() * maxX) + 1)},
            {translateY: Math.floor((Math.random() * maxY) + 1), translateX: Math.floor((Math.random() * maxX) + 1)},
            {translateY: Math.floor((Math.random() * maxY) + 1), translateX: Math.floor((Math.random() * maxX) + 1)},
          ],
        // Property Parameters
        duration: dur,
        easing: 'easeInOutSine',
        // Animation Parameters
        direction: 'alternate'
    });

}

Cqmille avatar Sep 29 '20 17:09 Cqmille

share a codepen to can be collaborate

sadeghbarati avatar Sep 29 '20 18:09 sadeghbarati

I'm not sure if this will help you, but you could use something like this:

https://animejs.com/documentation/#random

Anyway, i think that the feature you ask for would be very useful.

Hope it helps!

SantiagoIlli avatar Dec 28 '20 17:12 SantiagoIlli