# animateColorAsState

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/runtime/State<https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color>` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/animateColorAsState.composable#animateColorAsState(androidx.compose.ui.graphics.Color,androidx.compose.animation.core.AnimationSpec,kotlin.String,kotlin.Function1)( targetValue: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color>, label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, finishedListener: ((https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color) -> 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/graphics/Color`. | Cmn |

## Functions

### animateColorAsState

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

```
@Composable
fun animateColorAsState(
    targetValue: Color,
    animationSpec: AnimationSpec<Color> = colorDefaultSpring,
    label: String = "ColorAnimation",
    finishedListener: ((Color) -> Unit)? = null
): State<Color>
```

Fire-and-forget animation function for `https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color`. This Composable function is overloaded for different parameter types such as `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`, `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html`, `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset`, etc. When the provided `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#animateColorAsState(androidx.compose.ui.graphics.Color,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/package-summary#animateColorAsState(androidx.compose.ui.graphics.Color,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/animateColorAsState.composable#animateColorAsState(androidx.compose.ui.graphics.Color,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/animateColorAsState.composable#animateColorAsState(androidx.compose.ui.graphics.Color,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/package-summary#Animatable(androidx.compose.ui.graphics.Color)` for cancelable animations.

```kotlin
import androidx.compose.animation.animateColorAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.material.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

@Composable
fun ColorAnimation(primary: Boolean) {
    // Animates to primary or secondary color, depending on whether [primary] is true
    // [animateState] returns the current animation value in a State<Color> in this example. We
    // use the State<Color> object as a property delegate here.
    val color: Color by
        animateColorAsState(
            if (primary) MaterialTheme.colors.primary else MaterialTheme.colors.secondary
        )
    Box(modifier = Modifier.background(color))
}
```

| Parameters |
|---|---|
| `targetValue: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color` | 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/graphics/Color> = colorDefaultSpring` | The animation that will be used to change the value through time, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` by default |
| `label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html = "ColorAnimation"` | An optional label to differentiate from other animations in Android Studio. |
| `finishedListener: ((https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | An optional listener to get notified when the animation is finished. |