Add reverseOnRepeat option to LottieAnimatable #2128
Conversation
| override var clipSpec: LottieClipSpec? by mutableStateOf(null) | ||
| private set | ||
|
|
||
| override var speed: Float by mutableStateOf(1f) | ||
| private set | ||
|
|
||
| private val speedValue: Float by derivedStateOf { |
There was a problem hiding this comment.
Does this need to be a property or can it be derived as a local variable on line 291?
There was a problem hiding this comment.
Done - 71154c6
The value must remain a derivedStateOf instance otherwise the animation misbehaves. If you think that adds too much additional complexity to onFrame I can revert the change.
Thanks for the review!
There was a problem hiding this comment.
How does it "misbehave" when you make this a local variable?
There was a problem hiding this comment.
If speedValue is changed to a local val which isn't updated on L306 then the animation misbehaves and looks like this...
Screen.Recording.2022-09-14.at.12.49.45.mov
If you would prefer a var which is set on L287 and reassigned within onFrame on L306 I can make that change, it just seemed to complicate the function IMO instead of reading from a derivedStateOf property which does the calculation for you.
There was a problem hiding this comment.
I see. Could you add some documentation for this property since speed and speedValue is ambiguous on its own. It's not much better but maybe rawSpeed or actualSpeed or speedWithRepeatMode?
There was a problem hiding this comment.
Good idea. I added some docs to the property to explain why & when a negative value can be returned. I opted for frameSpeed for the property since that's more descriptive of how it is used. I didn't want to change speed -> rawSpeed as that would effect that public API of the class (as where the new frameSpeed property is private).
| @@ -278,9 +284,12 @@ private class LottieAnimatableImpl : LottieAnimatable { | |||
| val minProgress = clipSpec?.getMinProgress(composition) ?: 0f | |||
| val maxProgress = clipSpec?.getMaxProgress(composition) ?: 1f | |||
|
|
|||
| val dProgress = dNanos / 1_000_000 / composition.duration * speed | |||
| val speedValue: Float by derivedStateOf { | |||
There was a problem hiding this comment.
What is the derivedStateOf doing here? This isn't a composable function.
There was a problem hiding this comment.
See my comment above -- #2128 (comment)
I took a closer look at why making speedValue a val on L287 doesn't work as intended. The reason is that the rest of onFrame needs an updated speedValue each time iteration changes. So we would need a var on L287 and a reassigment on L306.
Based on this I decided that might further complicate onFrame which is already fairly complex so I reverted back to using a property for speedValue. If you would prefer the var + reassignment instead let me know.
This reverts commit 71154c6.
|
Thanks for your contribution! |
|
I am trying to use reverseOnRepeat but is not working for me. Do you have an example? My idea is pretty simple. Is a checkbox that user can check or uncheck on click and the animation should be reversed on click. Any help? Thanks in advance |
|
reverseOnRepeat only makes sense with `repeat=true`. If you want to play an
animation once in reverse try setting `speed=-1` then back to `speed=1` to
play if forward again.
…On Thu, Aug 24, 2023, 9:09 AM Agustin Sivoplás ***@***.***> wrote:
I am trying to use reverseOnRepeat but is not working for me. Do you have
an example? My idea is pretty simple. Is a checkbox that user can check or
uncheck on click and the animation should be reversed on click. Any help?
Thanks in advance
—
Reply to this email directly, view it on GitHub
<#2128 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAKE6ORE4VFFQCDO3HG4T3DXW5VD5ANCNFSM6AAAAAAQMX37PM>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
Resolves issue #2125 -
LottieAnimation Composable: support LottieAnimationView (XML) repeatMode equivalent.This PR adds a
reverseOnRepeatboolean option toLottieAnimatable(defaults tofalse). When set to true the effect is the same as usingapp:lottie_repeatMode="reverse"in the Android XML lottie implementation.Example:
Regular Repeat:
Screen.Recording.2022-09-14.at.14.01.14.mov
With reverseOnRepeat=true:
Screen.Recording.2022-09-14.at.14.02.59.mov