I want to animate the change between Icons.Default.Check
and Icons.Default.Close
, animate as in fade one out and the other in.
I have looked into the animation*AsState
however it doesn't seem like there is a built-in way to do this out of the box and I am not experienced enough in Jetpack Compose to figure out the correct way to make a custom animation like this.
if(isChecked){
Icon(imageVector = Icons.Default.Check, contentDescription = "", tint = Color.Black)
}else{
Icon(imageVector = Icons.Default.Close, contentDescription = "", tint = Color.Gray)
}
CodePudding user response:
You could use Side-Effects
@Composable
fun Fader(trigger: Boolean){ // trigger is a delegated MutableState variable.
var alpha = 1f
var animatedAlpha by animateFloatAsState(targetValue = alpha)
LaunchedEffect(key = trigger){
//Triggered upon key change. Change the value of trigger upon a button click or similar event.
alpha = 0f // First we make it go all the way down
delay(500) // Slight Delay, as a pause
alpha = 1f // Bring it up
}
// Now, when the trigger is set, a recomposition should occur.
// So, we change set the value here normally since the side-effect is taking care
// of the animation
Icon(
imageVector = if(triggered) .. else .., //Add your Vectors here
contentDescription = "Bla Bla Bla",
alpha = animatedAlpha
)
//Done
}
CodePudding user response:
You can use Crossfade
as showed in animation documentation.
Crossfade(targetState = isChecked) { isChecked ->
// note that it's required to use the value passed by Crossfade
// instead of your state value
if (isChecked) {
Icon(imageVector = Icons.Default.Check, contentDescription = "", tint = Color.Black)
} else {
Icon(imageVector = Icons.Default.Close, contentDescription = "", tint = Color.Gray)
}
}