Advanced animated color schemes in Jetpack Compose
·
huyhunhngc
Taking inspiration from: Animate background color
The simplest example when you want to change the background with animated color.
val animatedColor by animateColorAsState(
if (animateBackgroundColor) colorGreen else colorBlue,
label = "color"
)
Column(
modifier = Modifier.drawBehind {
drawRect(animatedColor)
}
) {
// your composable here
}
Usage
Generate the corresponding color scheme and provide it to the app theme using CompositionLocal
.
val colorScheme = LocalDynamicAnimatedTheme.current
val surfaceContainer by animateColor(colorScheme.surfaceContainer)
val primaryContainer by animateColor(colorScheme.primaryContainer)
val secondaryColor by animateColor(colorScheme.secondary)
val primaryColor by animateColor(colorScheme.primary)
val tertiaryColor by animateColor(colorScheme.tertiary)
val tertiaryContainer by animateColor(colorScheme.tertiaryContainer)
Create animateColor
composable
@Composable
fun animateColor(targetValue: Color): State<Color> {
return animateColorAsState(
targetValue = targetValue,
label = "dynamic",
animationSpec = tween(AnimatedThemeDuration)
)
}
Let’s see the results: