---
title: "animateColorAsState"
description: "Fire-and-forget animation function for [Color]. This Composable function is overloaded for
different parameter types such as [Dp], [Float], [Int], [Size], [Offset], etc. When the provided
[targetValue] is changed, the animation will run automatically. If there is already an animation
in-flight when [targetValue] changes, the on-going animation will adjust course to animate
towards the new target value.

[animateColorAsState] returns a [State] object. The value of the state object will continuously
be updated by the animation until the animation finishes.

Note, [animateColorAsState] cannot be canceled/stopped without removing this composable function
from the tree. See [Animatable][androidx.compose.animation.Animatable] for cancelable animations."
type: "composable"
---

<div class='type'>Composable Function</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


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


Fire-and-forget animation function for `Color`. This Composable function is overloaded for
different parameter types such as `Dp`, `Float`, `Int`, `Size`, `Offset`, etc. When the provided
`targetValue` is changed, the animation will run automatically. If there is already an animation
in-flight when `targetValue` changes, the on-going animation will adjust course to animate
towards the new target value.

`animateColorAsState` returns a `State` object. The value of the state object will continuously
be updated by the animation until the animation finishes.

Note, `animateColorAsState` cannot be canceled/stopped without removing this composable function
from the tree. See `Animatable` for cancelable animations.

#### Parameters

| | |
| --- | --- |
| targetValue | Target value of the animation |
| animationSpec | The animation that will be used to change the value through time, `spring` by default |
| label | An optional label to differentiate from other animations in Android Studio. |
| finishedListener | An optional listener to get notified when the animation is finished. |




<div class='sourceset sourceset-common'>Common</div>


> **Deprecated** animate*AsState APIs now have a new label parameter added.

```kotlin
@Composable
public fun animateColorAsState(
    targetValue: Color,
    animationSpec: AnimationSpec<Color> = colorDefaultSpring,
    finishedListener: ((Color) -> Unit)? = null,
): State<Color>
```



## Code Examples
### ColorAnimationSample
```kotlin
@Composable
fun ColorAnimationSample() {
    @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))
    }
}
```