# animateValue

Common/All

## Functions summary

|---|---|---|
| `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/animateValue.composable#(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 |
| `inline https://developer.android.com/reference/kotlin/androidx/compose/runtime/State<T>` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable <S : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?, 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/Transition<S>.https://developer.android.com/reference/kotlin/androidx/compose/animation/core/animateValue.composable#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)( typeConverter: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/TwoWayConverter<T, V>, noinline transitionSpec: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition.Segment<S>.() -> https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<T>, label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, targetValueByState: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (state) -> T )` Creates an animation of type `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)` as a part of the given `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition`. | Cmn |

## Functions

### 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) Added in [1.4.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.4.0)

```
@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)` |   |

### Transition.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/Transition.kt+function:animateValue) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0)

```
@Composable
inline fun <S : Any?, T : Any?, V : AnimationVector> Transition<S>.animateValue(
    typeConverter: TwoWayConverter<T, V>,
    noinline transitionSpec: @Composable Transition.Segment<S>.() -> FiniteAnimationSpec<T> = {
        spring()
    },
    label: String = "ValueAnimation",
    targetValueByState: @Composable (state) -> T
): State<T>
```

Creates an animation of type `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)` as a part of the given `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition`. This means the states of this animation will be managed by the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition`. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)` will be used to convert between type `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationVector` so that the animation system knows how to animate it.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)` is used as a mapping from a target state to the target value of this animation. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition` will be using this mapping to determine what value to target this animation towards. **Note** that `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)` is a composable function. This means the mapping function could access states, CompositionLocals, themes, etc. If the targetValue changes outside of a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition` run (i.e. when the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition` already reached its targetState), the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition` will start running again to ensure this animation reaches its new target smoothly.

An optional `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)` can be provided to specify (potentially different) animation for each pair of initialState and targetState. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec` includes any non-infinite animation, such as `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#tween(kotlin.Int,kotlin.Int,androidx.compose.animation.core.Easing)`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#keyframes(kotlin.Function1)` and even `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#repeatable(kotlin.Int,androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode,androidx.compose.animation.core.StartOffset)`, but not `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#infiniteRepeatable(androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode,androidx.compose.animation.core.StartOffset)`. By default, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)` uses a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` animation for all transition destinations.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)` is used to differentiate from other animations in the same transition in Android Studio.

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

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