Jetpack Compose makes use of coroutines to allow you to chain a number of animations. Whether or not they’re sequential or simultaneous, you possibly can create as many coroutines to create the specified impact.
We’ll begin by constructing the skeleton of our shuffle animation. Because it contains each sequential and parallel animations, we’ll have to create a number of coroutines in addition to some coroutineScope for the simultenaous side.
The skeleton ought to appear to be this:
This skeleton bootstraps our animation by splitting them into subsets of coroutines.
As for the animations themselves, Jetpack Compose exposes an animate droop technique callable from a coroutine context.
droop enjoyable animate(
initialValue: Float,
targetValue: Float,
initialVelocity: Float = 0f,
animationSpec: AnimationSpec<Float> = spring(),
block: (worth: Float, velocity: Float) -> Unit
)
For example, let’s begin with the enter animation. We want to scale down our playing cards from 1 to 0.9.
We are able to begin by saving a scale ratio and updating its worth inside the animate technique.
var scale by keep in mind mutableStateOf(1f)
val scope = rememberCoroutineScope()LaunchedEffect(key1 = Unit)
scope.launch
animate(1f, 0.9f) worth: Float, _: Float ->
scale = worth
Then we are able to apply this worth to each our card composables.
PlayerCard(
modifier = Modifier
.scale(scale),
// Different parameters
)
The animate operate will interpolate the size worth with a default spring impact. You may change this impact by overriding the animationSpec property.
