# animateDpAsState

Common/All

## Functions summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/runtime/State<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp>` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/core/animateDpAsState.composable#animateDpAsState(androidx.compose.ui.unit.Dp,androidx.compose.animation.core.AnimationSpec,kotlin.String,kotlin.Function1)( targetValue: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp>, label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, finishedListener: ((https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? )` Fire-and-forget animation function for `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`. | Cmn |

## Functions

### animateDpAsState

Cmn Artifact: [androidx.compose.animation:animation-core](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/core/AnimateAsState.kt+function:animateDpAsState)

```
@Composable
fun animateDpAsState(
    targetValue: Dp,
    animationSpec: AnimationSpec<Dp> = dpDefaultSpring,
    label: String = "DpAnimation",
    finishedListener: ((Dp) -> Unit)? = null
): State<Dp>
```

Fire-and-forget animation function for `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`. This Composable function is overloaded for different parameter types such as `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset`, etc. When the provided `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#animateDpAsState(androidx.compose.ui.unit.Dp,androidx.compose.animation.core.AnimationSpec,kotlin.String,kotlin.Function1)` is changed, the animation will run automatically. If there is already an animation in-flight when `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#animateDpAsState(androidx.compose.ui.unit.Dp,androidx.compose.animation.core.AnimationSpec,kotlin.String,kotlin.Function1)` changes, the on-going animation will adjust course to animate towards the new target value.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/core/animateDpAsState.composable#animateDpAsState(androidx.compose.ui.unit.Dp,androidx.compose.animation.core.AnimationSpec,kotlin.String,kotlin.Function1)` returns a `https://developer.android.com/reference/kotlin/androidx/compose/runtime/State` object. The value of the state object will continuously be updated by the animation until the animation finishes.

Note, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/animateDpAsState.composable#animateDpAsState(androidx.compose.ui.unit.Dp,androidx.compose.animation.core.AnimationSpec,kotlin.String,kotlin.Function1)` cannot be canceled/stopped without removing this composable function from the tree. See `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Animatable` for cancelable animations.

```kotlin
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

@Composable
fun HeightAnimation(collapsed: Boolean) {
    // Animates a height of [Dp] type to different target values based on the [collapsed] flag.
    val height: Dp by animateDpAsState(if (collapsed) 10.dp else 20.dp)
    Box(Modifier.fillMaxWidth().requiredHeight(height).background(color = Color.Red))
}
```

| Parameters |
|---|---|
| `targetValue: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | Target value of the animation |
| `animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp> = dpDefaultSpring` | The animation that will be used to change the value through time. Physics animation will be used by default. |
| `label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html = "DpAnimation"` | An optional label to differentiate from other animations in Android Studio. |
| `finishedListener: ((https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | An optional end listener to get notified when the animation is finished. |

| Returns |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/runtime/State<https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp>` | A `https://developer.android.com/reference/kotlin/androidx/compose/runtime/State` object, the value of which is updated by animation. |