I want to animate the radius of all corners of a r...

# compose

[Matti MK]

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 👍

rememberInfiniteTransition().animateValue(
        initialValue = 60,
        targetValue = 80,
        typeConverter = Int.Companion.VectorConverter,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = ANIMATION_TIME, easing = LinearEasing),
            repeatMode = RepeatMode.Reverse
        )
    )

[Doris Liu]

Consider using Animatable for switching between infinite animation and state based animations:

val animation = remember { Animatable(60, Int.VectorConverter) }
LaunchedEffects(myState) {
   if (myState == isLoading) { 
       animation.animateTo(80, infiniteRepeatable(...)) 
   } else {
       animation.animateTo(stateBasedValue, ...)
   }
}