# InfiniteTransition

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/InfiniteTransition.kt+class:androidx.compose.animation.core.InfiniteTransition) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0) Common/All
- Cmn

  ```
  class InfiniteTransition
  ```

*** ** * ** ***

`https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition` is responsible for running child animations. Child animations can be added using `https://developer.android.com/reference/kotlin/androidx/compose/animation/animateColor.composable#(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1,kotlin.String,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/animateFloat.composable#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)`, or `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/animateValue.composable#(androidx.compose.animation.core.InfiniteTransition).animateValue(kotlin.Any,kotlin.Any,androidx.compose.animation.core.TwoWayConverter,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)`. Child animations will start running as soon as they enter the composition, and will not stop until they are removed from the composition.

```kotlin
import androidx.compose.animation.animateColor
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer

@Composable
fun InfinitelyPulsingHeart() {
    // Creates an [InfiniteTransition] instance for managing child animations.
    val infiniteTransition = rememberInfiniteTransition()

    // Creates a child animation of float type as a part of the [InfiniteTransition].
    val scale by
        infiniteTransition.animateFloat(
            initialValue = 3f,
            targetValue = 6f,
            animationSpec =
                infiniteRepeatable(
                    // Infinitely repeating a 1000ms tween animation using default easing curve.
                    animation = tween(1000),
                    // After each iteration of the animation (i.e. every 1000ms), the animation
                    // will
                    // start again from the [initialValue] defined above.
                    // This is the default [RepeatMode]. See [RepeatMode.Reverse] below for an
                    // alternative.
                    repeatMode = RepeatMode.Restart,
                ),
        )

    // Creates a Color animation as a part of the [InfiniteTransition].
    val color by
        infiniteTransition.animateColor(
            initialValue = Color.Red,
            targetValue = Color(0xff800000), // Dark Red
            animationSpec =
                infiniteRepeatable(
                    // Linearly interpolate between initialValue and targetValue every 1000ms.
                    animation = tween(1000, easing = LinearEasing),
                    // Once [TargetValue] is reached, starts the next iteration in reverse (i.e.
                    // from
                    // TargetValue to InitialValue). Then again from InitialValue to
                    // TargetValue. This
                    // [RepeatMode] ensures that the animation value is *always continuous*.
                    repeatMode = RepeatMode.Reverse,
                ),
        )

    Box(Modifier.fillMaxSize()) {
        Icon(
            Icons.Filled.Favorite,
            contentDescription = null,
            modifier =
                Modifier.align(Alignment.Center).graphicsLayer(scaleX = scale, scaleY = scale),
            tint = color,
        )
    }
}
```

## Summary

| ### Nested types |
|---|
| `inner class https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition.TransitionAnimationState<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?, V : https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationVector> : https://developer.android.com/reference/kotlin/androidx/compose/runtime/State<T>` Each animation created using `https://developer.android.com/reference/kotlin/androidx/compose/animation/animateColor.composable#(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1,kotlin.String,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/animateFloat.composable#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)`, or `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/animateValue.composable#(androidx.compose.animation.core.InfiniteTransition).animateValue(kotlin.Any,kotlin.Any,androidx.compose.animation.core.TwoWayConverter,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` is represented as a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition.TransitionAnimationState` in `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition`. |

| ### Public properties |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin.collections/-list/index.html<https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition.TransitionAnimationState<*, *>>` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition#animations()` List of `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition.TransitionAnimationState`s that are in a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition`. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition#label()` A label for differentiating this animation from others in android studio. | Cmn |

| ### Extension functions |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/runtime/State<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition.https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)( initialValue: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, targetValue: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteRepeatableSpec<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>, label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html )` Creates an animation of Float type that runs infinitely as a part of the given `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/runtime/State<T>` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable <T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?, V : https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationVector> https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition.https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition#(androidx.compose.animation.core.InfiniteTransition).animateValue(kotlin.Any,kotlin.Any,androidx.compose.animation.core.TwoWayConverter,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)( initialValue: T, targetValue: T, typeConverter: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/TwoWayConverter<T, V>, animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteRepeatableSpec<T>, label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html )` Creates an animation of type `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateValue(kotlin.Any,kotlin.Any,androidx.compose.animation.core.TwoWayConverter,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` that runs infinitely as a part of the given `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition`. | Cmn |
| `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/core/InfiniteTransition.https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition#(androidx.compose.animation.core.InfiniteTransition).animateColor(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)( initialValue: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, targetValue: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color, animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteRepeatableSpec<https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Color>, label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html )` Creates a Color animation that runs infinitely as a part of the given `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition`. | Cmn |

## Public properties

### animations

Cmn Added in [1.4.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.4.0)

```
val animations: List<InfiniteTransition.TransitionAnimationState<*, *>>
```

List of `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition.TransitionAnimationState`s that are in a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition`.

### label

Cmn Added in [1.4.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.4.0)

```
val label: String
```

A label for differentiating this animation from others in android studio.

## Extension functions

### InfiniteTransition.animateFloat

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/InfiniteTransition.kt+function:animateFloat)

```
@Composable
fun InfiniteTransition.animateFloat(
    initialValue: Float,
    targetValue: Float,
    animationSpec: InfiniteRepeatableSpec<Float>,
    label: String = "FloatAnimation"
): State<Float>
```

Creates an animation of Float type that runs infinitely as a part of the given `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition`.

Once the animation is created, it will run from `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` to `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` and repeat. Depending on the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/RepeatMode` of the provided `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)`, the animation could either restart after each iteration (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/RepeatMode#Restart`), or reverse after each iteration (i.e . `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/RepeatMode#Reverse`).

If `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` or `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` is changed at any point during the animation, the animation will be restarted with the new `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)`. **Note** : this means continuity will *not* be preserved.

A `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` for differentiating this animation from others in android studio.

```kotlin
import androidx.compose.animation.animateColor
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer

@Composable
fun InfinitelyPulsingHeart() {
    // Creates an [InfiniteTransition] instance for managing child animations.
    val infiniteTransition = rememberInfiniteTransition()

    // Creates a child animation of float type as a part of the [InfiniteTransition].
    val scale by
        infiniteTransition.animateFloat(
            initialValue = 3f,
            targetValue = 6f,
            animationSpec =
                infiniteRepeatable(
                    // Infinitely repeating a 1000ms tween animation using default easing curve.
                    animation = tween(1000),
                    // After each iteration of the animation (i.e. every 1000ms), the animation
                    // will
                    // start again from the [initialValue] defined above.
                    // This is the default [RepeatMode]. See [RepeatMode.Reverse] below for an
                    // alternative.
                    repeatMode = RepeatMode.Restart,
                ),
        )

    // Creates a Color animation as a part of the [InfiniteTransition].
    val color by
        infiniteTransition.animateColor(
            initialValue = Color.Red,
            targetValue = Color(0xff800000), // Dark Red
            animationSpec =
                infiniteRepeatable(
                    // Linearly interpolate between initialValue and targetValue every 1000ms.
                    animation = tween(1000, easing = LinearEasing),
                    // Once [TargetValue] is reached, starts the next iteration in reverse (i.e.
                    // from
                    // TargetValue to InitialValue). Then again from InitialValue to
                    // TargetValue. This
                    // [RepeatMode] ensures that the animation value is *always continuous*.
                    repeatMode = RepeatMode.Reverse,
                ),
        )

    Box(Modifier.fillMaxSize()) {
        Icon(
            Icons.Filled.Favorite,
            contentDescription = null,
            modifier =
                Modifier.align(Alignment.Center).graphicsLayer(scaleX = scale, scaleY = scale),
            tint = color,
        )
    }
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/animateValue.composable#(androidx.compose.animation.core.InfiniteTransition).animateValue(kotlin.Any,kotlin.Any,androidx.compose.animation.core.TwoWayConverter,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/animateColor.composable#(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1,kotlin.String,kotlin.Function1)` |   |

### InfiniteTransition.animateValue

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/InfiniteTransition.kt+function:animateValue)

```
@Composable
fun <T : Any?, V : AnimationVector> InfiniteTransition.animateValue(
    initialValue: T,
    targetValue: T,
    typeConverter: TwoWayConverter<T, V>,
    animationSpec: InfiniteRepeatableSpec<T>,
    label: String = "ValueAnimation"
): State<T>
```

Creates an animation of type `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateValue(kotlin.Any,kotlin.Any,androidx.compose.animation.core.TwoWayConverter,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` that runs infinitely as a part of the given `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition`. Any data type can be animated so long as it can be converted from and to an `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationVector`. This conversion needs to be provided as a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateValue(kotlin.Any,kotlin.Any,androidx.compose.animation.core.TwoWayConverter,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)`. Some examples of such `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/TwoWayConverter` are: `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(kotlin.Int.Companion).VectorConverter()`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.ui.unit.Dp.Companion).VectorConverter()`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.ui.geometry.Size.Companion).VectorConverter()`, etc

Once the animation is created, it will run from `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateValue(kotlin.Any,kotlin.Any,androidx.compose.animation.core.TwoWayConverter,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` to `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateValue(kotlin.Any,kotlin.Any,androidx.compose.animation.core.TwoWayConverter,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` and repeat. Depending on the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/RepeatMode` of the provided `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateValue(kotlin.Any,kotlin.Any,androidx.compose.animation.core.TwoWayConverter,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)`, the animation could either restart after each iteration (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/RepeatMode#Restart`), or reverse after each iteration (i.e . `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/RepeatMode#Reverse`).

If `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateValue(kotlin.Any,kotlin.Any,androidx.compose.animation.core.TwoWayConverter,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` or `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateValue(kotlin.Any,kotlin.Any,androidx.compose.animation.core.TwoWayConverter,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` is changed at any point during the animation, the animation will be restarted with the new `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateValue(kotlin.Any,kotlin.Any,androidx.compose.animation.core.TwoWayConverter,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateValue(kotlin.Any,kotlin.Any,androidx.compose.animation.core.TwoWayConverter,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)`. **Note** : this means continuity will *not* be preserved.

A `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateValue(kotlin.Any,kotlin.Any,androidx.compose.animation.core.TwoWayConverter,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` for differentiating this animation from others in android studio.

```kotlin
import androidx.compose.animation.core.FastOutLinearInEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.VectorConverter
import androidx.compose.animation.core.animateValue
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.keyframes
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.offset
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

// Creates an [InfiniteTransition] instance to run child animations.
val infiniteTransition = rememberInfiniteTransition()
// Infinitely animate a Dp offset from 0.dp to 100.dp
val offsetX by
    infiniteTransition.animateValue(
        initialValue = 0.dp,
        targetValue = 100.dp,
        typeConverter = Dp.VectorConverter,
        animationSpec =
            infiniteRepeatable(
                animation =
                    keyframes {
                        durationMillis = 500
                        0.dp at 200 // ms
                        80.dp at 300 using FastOutLinearInEasing
                    }
                // Use the default RepeatMode.Restart to start from 0.dp after each iteration
            ),
    )

Box(Modifier.offset(x = offsetX)) {
    // Content goes here
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/animateFloat.composable#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/animateColor.composable#(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1,kotlin.String,kotlin.Function1)` |   |

### InfiniteTransition.animateColor

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/Transition.kt+function:animateColor)

```
@Composable
fun InfiniteTransition.animateColor(
    initialValue: Color,
    targetValue: Color,
    animationSpec: InfiniteRepeatableSpec<Color>,
    label: String = "ColorAnimation"
): State<Color>
```

Creates a Color animation that runs infinitely as a part of the given `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition`.

Once the animation is created, it will run from `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateColor(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` to `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateColor(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` and repeat. Depending on the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/RepeatMode` of the provided `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateColor(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)`, the animation could either restart after each iteration (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/RepeatMode#Restart`), or reverse after each iteration (i.e . `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/RepeatMode#Reverse`).

If `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateColor(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` or `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateColor(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` is changed at any point during the animation, the animation will be restarted with the new initial/targetValue. **Note** : this means animation continuity will *not* be preserved when changing either `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateColor(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` or `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateColor(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)`.

A `https://developer.android.com/reference/kotlin/androidx/compose/animation/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateColor(androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` for differentiating this animation from others in android studio.

```kotlin
import androidx.compose.animation.animateColor
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.Transition
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer

@Composable
fun InfinitelyPulsingHeart() {
    // Creates an [InfiniteTransition] instance for managing child animations.
    val infiniteTransition = rememberInfiniteTransition()

    // Creates a child animation of float type as a part of the [InfiniteTransition].
    val scale by
        infiniteTransition.animateFloat(
            initialValue = 3f,
            targetValue = 6f,
            animationSpec =
                infiniteRepeatable(
                    // Infinitely repeating a 1000ms tween animation using default easing curve.
                    animation = tween(1000),
                    // After each iteration of the animation (i.e. every 1000ms), the animation
                    // will
                    // start again from the [initialValue] defined above.
                    // This is the default [RepeatMode]. See [RepeatMode.Reverse] below for an
                    // alternative.
                    repeatMode = RepeatMode.Restart,
                ),
        )

    // Creates a Color animation as a part of the [InfiniteTransition].
    val color by
        infiniteTransition.animateColor(
            initialValue = Color.Red,
            targetValue = Color(0xff800000), // Dark Red
            animationSpec =
                infiniteRepeatable(
                    // Linearly interpolate between initialValue and targetValue every 1000ms.
                    animation = tween(1000, easing = LinearEasing),
                    // Once [TargetValue] is reached, starts the next iteration in reverse (i.e.
                    // from
                    // TargetValue to InitialValue). Then again from InitialValue to
                    // TargetValue. This
                    // [RepeatMode] ensures that the animation value is *always continuous*.
                    repeatMode = RepeatMode.Reverse,
                ),
        )

    Box(Modifier.fillMaxSize()) {
        Icon(
            Icons.Filled.Favorite,
            contentDescription = null,
            modifier =
                Modifier.align(Alignment.Center).graphicsLayer(scaleX = scale, scaleY = scale),
            tint = color,
        )
    }
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/animateValue.composable#(androidx.compose.animation.core.InfiniteTransition).animateValue(kotlin.Any,kotlin.Any,androidx.compose.animation.core.TwoWayConverter,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteRepeatableSpec` |   |