How can I change the typography of a text with animation in jetpack compose?
CodePudding user response:
try this code. i think it works
val rem = remember {mutableStateOf(true)}
Button(onClick = {rem.value = !rem.value})
{(text = "animate text!")}
val animRem = animateFloatAsState(targetValue = if (rem.value) 1f else .1f)
val decoratedLabel: @Composable (() -> Unit) =
@Composable {
val labelAnimatedStyle = lerp(
MaterialTheme.typography.subtitle1,
MaterialTheme.typography.caption,
animRem.value
)
Decoration2(
contentColor = TextFieldDefaults.textFieldColors()
.labelColor(
true,
// if label is used as a placeholder (aka not as a small header
// at the top), we don't use an error color
rem.value,
remember { MutableInteractionSource() }
).value,
typography = labelAnimatedStyle,
content = { Text(text = "label") }
)
}
decoratedLabel()
you should duplicate this function. because it is an internal function and you can't use it in your code
@Composable fun Decoration(
contentColor: Color,
typography: TextStyle? = null,
contentAlpha: Float? = null,
content: @Composable () -> Unit) {
val colorAndEmphasis: @Composable () -> Unit = @Composable {
CompositionLocalProvider(LocalContentColor provides contentColor) {
if (contentAlpha != null) {
CompositionLocalProvider(
LocalContentAlpha provides contentAlpha,
content = content
)
} else {
CompositionLocalProvider(
LocalContentAlpha provides contentColor.alpha,
content = content
)
}
}
}
if (typography != null) ProvideTextStyle(typography, colorAndEmphasis) else colorAndEmphasis()}