animateValueAsState

Functions summary

State<T>
@Composable
<T : Any?, V : AnimationVector> animateValueAsState(
    targetValue: T,
    typeConverter: TwoWayConverter<T, V>,
    animationSpec: AnimationSpec<T>,
    visibilityThreshold: T?,
    label: String,
    finishedListener: ((T) -> Unit)?
)

Fire-and-forget animation function for any value.
Cmn

Functions

animateValueAsState

Cmn 
@Composable
fun <T : Any?, V : AnimationVector> animateValueAsState(
    targetValue: T,
    typeConverter: TwoWayConverter<T, V>,
    animationSpec: AnimationSpec<T> = remember { spring() },
    visibilityThreshold: T? = null,
    label: String = "ValueAnimation",
    finishedListener: ((T) -> Unit)? = null
): State<T>

Fire-and-forget animation function for any value. This Composable function is overloaded for different parameter types such as Dp, Color, 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.

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

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

import androidx.compose.animation.core.AnimationVector2D
import androidx.compose.animation.core.TwoWayConverter
import androidx.compose.animation.core.animateValueAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun ArbitraryValueTypeAnimation(enabled: Boolean) {
    // Sets up the different animation target values based on the [enabled] flag.
    val mySize =
        remember(enabled) {
            if (enabled) {
                MySize(500.dp, 500.dp)
            } else {
                MySize(100.dp, 100.dp)
            }
        }

    // Animates a custom type value to the given target value, using a [TwoWayConverter]. The
    // converter tells the animation system how to convert the custom type from and to
    // [AnimationVector], so that it can be animated.
    val animSize: MySize by
        animateValueAsState(
            mySize,
            TwoWayConverter<MySize, AnimationVector2D>(
                convertToVector = { AnimationVector2D(it.width.value, it.height.value) },
                convertFromVector = { MySize(it.v1.dp, it.v2.dp) },
            ),
        )
    Box(Modifier.size(animSize.width, animSize.height).background(color = Color.Red))
}

data class MySize(val width: Dp, val height: Dp)

Parameters
targetValue: T

Target value of the animation
typeConverter: TwoWayConverter<T, V>

A TwoWayConverter to convert from the animation value from and to an AnimationVector
animationSpec: AnimationSpec<T> = remember { spring() }

The animation that will be used to change the value through time. Physics animation will be used by default.
visibilityThreshold: T? = null

An optional threshold to define when the animation value can be considered close enough to the targetValue to end the animation.
label: String = "ValueAnimation"

An optional label to differentiate from other animations in Android Studio.
finishedListener: ((T) -> Unit)? = null

An optional end listener to get notified when the animation is finished.
Returns
State<T>

A State object, the value of which is updated by animation.