Emulating `Animated.loop()` about legend-motion HOT 9 CLOSED

Ah ok, I see what you mean. It's possible you could set the transition to duration 0 while resetting it to make it not animate during the reset:

transition={{
    type: 'timing',
    duration: 0
}}

But I haven't actually tested that. It's late here in Singapore so I'll test that and think about it some more tomorrow.

from legend-motion.

There's not currently a specific looping function because it just animates to the values in animate. You could create a loop ad-hoc by setting the animate value to the initial value and starting over?

We could potentially add a more convenient way to do loops - how do you think it should work? Could you share a sample of what you'd like to do?

from legend-motion.

I'm not sure that would work (but I am welcome to being proven wrong) because if I set the values in animate back to initial it'll produce the back and forth animation I don't want. Correct?

I'm currently building a ConfettiOverlay where each piece of confetti is a Motion.View. I have them "fall" from above a View to below it (with overflow: 'hidden') and would love to recycle the pieces without needing to the management of removing and adding pieces of confetti from the parent.

I'm new to RN and don't have a lot of experience with the Animated API, so all I can say at the moment is that for my use case, an API of a loop: boolean prop would work for me. Set loop={true} on Motion.View and when the animation completes, put the Motion.View back to its initial state (without tweening/interpolating to it) and start animating again.

from legend-motion.

I tested that idea and it does work as I think you described. So when a piece of confetti is ready to drop, reset it with no transition to the starting position and wait a frame for it to update, then animate it to the target position.

Does that work?

from legend-motion.

Yeah, that would be great. That's what I would expect a loop to do based on what the Animated.loop API says: https://reactnative.dev/docs/animated#loop

Thanks for exploring this and sorry for the slow reply. I try to avoid the laptop over the weekend.

from legend-motion.

Looks like the loop method has an iterations option, which could be a cool feature to add. And if you need help with a PR, that's fine. Just point me in the right direction. I could spare some work time to help make this change.

We are using this at my work for a design system. I'm using Motion under the hood to make our primitives optionally animatable and really appreciate that the API means the consumers of the system don't have to manage Animated.Values all over the place.

from legend-motion.

I'm pretty swamped right now so a PR would be great! Or I can try to get to it this weekend.

I think let's add a loop: number prop to the MotionTransition in Interfaces.ts that represents the number of iterations. Make it a base interface that MotionTransitionTween and MotionTransitionSpring extend?

Then in createMotionComponent.ts where it calls Animated.spring/Animated.timing check for the loop prop on the transitionForKey and wrap the animation in a loop?

from legend-motion.

And use -1 for infinite looping?

from legend-motion.

And use -1 for infinite looping?

Yes exactly, to match the Animated behavior.

from legend-motion.