Animate visibility in compose

Animate Visibility in Compose

Introduction

Jetpack Compose offers a powerful and declarative way to build UIs in Android. One common requirement is to animate the visibility of UI elements. This article will guide you through animating the visibility of composables using Compose’s animation framework.

Basic Visibility Animation

To animate the visibility of a composable, we can use the `AnimatedVisibility` composable. It takes a `visible` state and an optional `enter` and `exit` animation specification.

Example

@Composable
fun MyScreen() {
  var visible by remember { mutableStateOf(false) }
  Column {
    Button(onClick = { visible = !visible }) {
      Text("Toggle Visibility")
    }
    AnimatedVisibility(
      visible = visible,
      enter = fadeIn(animationSpec = tween(durationMillis = 500)),
      exit = fadeOut(animationSpec = tween(durationMillis = 500))
    ) {
      Text("This text will fade in/out")
    }
  }
}

Customization Options

Animation Spec

• `tween`: Specifies a linear animation with a given duration.
• `spring`: Provides a bouncy animation with customizable parameters.
• `keyframes`: Allows you to define multiple keyframes for more complex animations.

Enter and Exit Animations

• `fadeIn()`: Animates the alpha value from 0 to 1 (fully opaque).
• `fadeOut()`: Animates the alpha value from 1 to 0 (fully transparent).
• `slideIn()`: Animates the composable sliding in from a specified direction.
• `slideOut()`: Animates the composable sliding out to a specified direction.

Advanced Techniques

Using `Modifier.animate()`

For fine-grained control over animation properties, you can use the `Modifier.animate()` modifier directly. This allows you to specify custom animation properties, such as `alpha`, `scaleX`, `scaleY`, and more.

Example

@Composable
fun MyScreen() {
  var visible by remember { mutableStateOf(false) }
  Column {
    Button(onClick = { visible = !visible }) {
      Text("Toggle Visibility")
    }
    Box(
      modifier = Modifier
        .fillMaxWidth()
        .height(100dp)
        .background(Color.Blue)
        .animate(
          targetValue = visible,
          tween(durationMillis = 500),
          label = "visibility"
        ) { value ->
          Modifier
            .alpha(if (value) 1f else 0f)
        }
    )
  }
}

Comparison of Methods

Conclusion

Animating the visibility of composables in Jetpack Compose is straightforward with the `AnimatedVisibility` composable or the `Modifier.animate()` modifier. These options provide flexibility and control to create visually appealing UI transitions that enhance the user experience.