anime
anime copied to clipboard
Keyframe repeat
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'
});
}
share a codepen to can be collaborate
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!