How do you animate a swap of Image

user_12035648 0
Viewed 1192

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)
}
android-jetpack-compose kotlin android-animation
2 Answers

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)
    }
}
user_35857960

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
}
user_158808650
Related