# 2.4 Animations

Animations are crucial in providing a smooth and engaging experience for the users. Jetpack Compose provides an extensive list of APIs that can be used to implement different animation in an app. Many Jetpack Compose animation APIs can be used as composable functions like other layout and ui elements. 

## AnimatedVisibility

The `AnimatedVisibility` composable animates the appearance and dissapearane of elements. By default, the enter transition is fading in and expanding, and the exit transition is fading out and shrinking. The transition can be customized by specifying **`EnterTransition`** and **`ExitTransition`**. 

**`EnterTransition`** examples: `fadeIn`, `slideIn`, `slideInHorizontally`, `slideInVertically`, `scaleIn`, `expandIn`, `expandHorizontally`, `expandVertically`

**`ExitTransition`** examples: `fadeOut`, `slideOut`, `slideOutHorizontally`, `slideOutVertically`, `scaleOut`, `expandOut`, `shrinkHorizontally`, `shrinkVertically`

Transitions can be combined using a **`+`** operator in between `EnterTransition` or `ExitTransition` objects. 

Content within `AnimatedVisibility`, direct or indirect children, can use the **`animateEnterExit`** modifier to specify a different animation behavior for each child. The visual effect for each child is a combonation of the animation specified in the `AnimatedVisibility` composable and the child's own animation. 

```kotlin
AnimatedVisibility(
    visible = visible,
    enter = fadeIn(),
    exit = fadeOut()
) {
    // Fade in/out the background and the foreground.
    Box(Modifier.fillMaxSize().background(Color.DarkGray)) {
        // Box is a child of AnimatedVisibility
        Box(
            Modifier
                .align(Alignment.Center)
                .animateEnterExit(
                    // Slide in/out the inner box.
                    enter = slideInVertically(),
                    exit = slideOutVertically()
                )
                .sizeIn(minWidth = 256.dp, minHeight = 64.dp)
                .background(Color.Red)
        ) {
            // Content...
        }
    }
}
```

If each child wants its own distinct animation, AnimatedVisibility can apply no animations  by specifying **`EnterTransition.None`** and **`ExitTransition.None`** in the AnimatedVisibility composable. 

## animate\*AsState

The `animate*AsState` functions are the easiest to animate a single value. The function takes in an end value, and the API starts the animation from the current value to the end value. 

```kotlin
val alpha: Float by animateFloatAsState(if (enabled) 1f else 0.5f)
Box(
    Modifier.fillMaxSize()
        //alpha is the opacity of the box
        .graphicsLayer(alpha = alpha)
        .background(Color.Red)
)
// changes the opacity of a red rectangle between 1f to 0.5f
```

Jetpack Compose provides `animate*AsState` functions for `Float`, `Color`, `DP`, `Size`, `Offset`, `Rect`, `Int`, `IntOffset`, and `IntSize`. Other data types can be supported by providing a `TwoWayConverter` to `animateValueAsState` that takes a generic type. 

## Customize Animations

Most animation APIs allow developers to cusomize the animation by an optional `AnimationSpec` parameter. Dependent on the animation type, the `AnimationSpec` will also be different. 


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://android-course.cornellappdev.com/chapters/2.-jetpack-compose/2.4-animations.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.