https://kotlinlang.org logo
#compose
Title
# compose
m

Matti MK

12/20/2021, 12:25 PM
I want to animate the radius of all corners of a rectangle, independently in different ranges. Moreover, I’d like this to be state-based so I can change over to a different animation at a given time. The use case is to show this on a loading screen the during the loading state, then at some point later transition to a scale animation. My first approach was to test the
rememberInfiniteTransition()
as shown below which works nicely, but is not state based. I’m wondering which animation I should go with to have a
repeatable
animation with
RepeatMode.Reverse
and have it be state-based? I looked into
repeatable
(https://developer.android.com/jetpack/compose/animation#repeatable), but I still have to provide an iteration count, which I do not know beforehand. Thanks 👍
Copy code
rememberInfiniteTransition().animateValue(
        initialValue = 60,
        targetValue = 80,
        typeConverter = Int.Companion.VectorConverter,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = ANIMATION_TIME, easing = LinearEasing),
            repeatMode = RepeatMode.Reverse
        )
    )
d

Doris Liu

12/20/2021, 7:48 PM
Consider using
Animatable
for switching between infinite animation and state based animations:
Copy code
val animation = remember { Animatable(60, Int.VectorConverter) }
LaunchedEffects(myState) {
   if (myState == isLoading) { 
       animation.animateTo(80, infiniteRepeatable(...)) 
   } else {
       animation.animateTo(stateBasedValue, ...)
   }
}
👍 2
18 Views