{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

AnimateAsStateKt

public final class AnimateAsStateKt


Summary

Public methods

static final @NonNull State<@NonNull Dp>
@Composable
animateDpAsState(
    @NonNull Dp targetValue,
    @NonNull AnimationSpec<@NonNull Dp> animationSpec,
    @NonNull String label,
    Function1<@NonNull DpUnit> finishedListener
)

Fire-and-forget animation function for Dp.

static final @NonNull State<@NonNull Float>
@Composable
animateFloatAsState(
    float targetValue,
    @NonNull AnimationSpec<@NonNull Float> animationSpec,
    float visibilityThreshold,
    @NonNull String label,
    Function1<@NonNull FloatUnit> finishedListener
)

Fire-and-forget animation function for Float.

static final @NonNull State<@NonNull Integer>
@Composable
animateIntAsState(
    int targetValue,
    @NonNull AnimationSpec<@NonNull Integer> animationSpec,
    @NonNull String label,
    Function1<@NonNull IntegerUnit> finishedListener
)

Fire-and-forget animation function for Int.

static final @NonNull State<@NonNull IntOffset>
@Composable
animateIntOffsetAsState(
    @NonNull IntOffset targetValue,
    @NonNull AnimationSpec<@NonNull IntOffset> animationSpec,
    @NonNull String label,
    Function1<@NonNull IntOffsetUnit> finishedListener
)

Fire-and-forget animation function for IntOffset.

static final @NonNull State<@NonNull IntSize>
@Composable
animateIntSizeAsState(
    @NonNull IntSize targetValue,
    @NonNull AnimationSpec<@NonNull IntSize> animationSpec,
    @NonNull String label,
    Function1<@NonNull IntSizeUnit> finishedListener
)

Fire-and-forget animation function for IntSize.

static final @NonNull State<@NonNull Offset>
@Composable
animateOffsetAsState(
    @NonNull Offset targetValue,
    @NonNull AnimationSpec<@NonNull Offset> animationSpec,
    @NonNull String label,
    Function1<@NonNull OffsetUnit> finishedListener
)

Fire-and-forget animation function for Offset.

static final @NonNull State<@NonNull Rect>
@Composable
animateRectAsState(
    @NonNull Rect targetValue,
    @NonNull AnimationSpec<@NonNull Rect> animationSpec,
    @NonNull String label,
    Function1<@NonNull RectUnit> finishedListener
)

Fire-and-forget animation function for Rect.

static final @NonNull State<@NonNull Size>
@Composable
animateSizeAsState(
    @NonNull Size targetValue,
    @NonNull AnimationSpec<@NonNull Size> animationSpec,
    @NonNull String label,
    Function1<@NonNull SizeUnit> finishedListener
)

Fire-and-forget animation function for Size.

static final @NonNull State<@NonNull T>
@Composable
<T extends Object, V extends AnimationVector> animateValueAsState(
    @NonNull T targetValue,
    @NonNull TwoWayConverter<@NonNull T, @NonNull V> typeConverter,
    @NonNull AnimationSpec<@NonNull T> animationSpec,
    T visibilityThreshold,
    @NonNull String label,
    Function1<@NonNull T, Unit> finishedListener
)

Fire-and-forget animation function for any value.

Public methods

animateDpAsState

@Composable
public static final @NonNull State<@NonNull DpanimateDpAsState(
    @NonNull Dp targetValue,
    @NonNull AnimationSpec<@NonNull Dp> animationSpec,
    @NonNull String label,
    Function1<@NonNull DpUnit> finishedListener
)

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

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

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

import androidx.compose.animation.core.animateDpAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

@Composable
fun HeightAnimation(collapsed: Boolean) {
    // Animates a height of [Dp] type to different target values based on the [collapsed] flag.
    val height: Dp by animateDpAsState(if (collapsed) 10.dp else 20.dp)
    Box(Modifier.fillMaxWidth().requiredHeight(height).background(color = Color.Red))
}
Parameters
@NonNull Dp targetValue

Target value of the animation

@NonNull AnimationSpec<@NonNull Dp> animationSpec

The animation that will be used to change the value through time. Physics animation will be used by default.

@NonNull String label

An optional label to differentiate from other animations in Android Studio.

Function1<@NonNull DpUnit> finishedListener

An optional end listener to get notified when the animation is finished.

Returns
@NonNull State<@NonNull Dp>

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

animateFloatAsState

@Composable
public static final @NonNull State<@NonNull FloatanimateFloatAsState(
    float targetValue,
    @NonNull AnimationSpec<@NonNull Float> animationSpec,
    float visibilityThreshold,
    @NonNull String label,
    Function1<@NonNull FloatUnit> finishedListener
)

Fire-and-forget animation function for Float. 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.

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

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

import androidx.compose.animation.core.animateFloatAsState
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer

@Composable
fun alphaAnimation(visible: Boolean) {
    // Animates to 1f or 0f based on [visible].
    // This [animateState] returns a State<Float> object. The value of the State object is
    // being updated by animation. (This method is overloaded for different parameter types.)
    // Here we use the returned [State] object as a property delegate.
    val alpha: Float by animateFloatAsState(if (visible) 1f else 0f)

    // Updates the alpha of a graphics layer with the float animation value. It is more
    // performant to modify alpha in a graphics layer than using `Modifier.alpha`. The former
    // limits the invalidation scope of alpha change to graphicsLayer's draw stage (i.e. no
    // recomposition would be needed). The latter triggers recomposition on each animation
    // frame.
    Box(modifier = Modifier.graphicsLayer { this.alpha = alpha }.background(Color.Red))
}
Parameters
float targetValue

Target value of the animation

@NonNull AnimationSpec<@NonNull Float> animationSpec

The animation that will be used to change the value through time. spring will be used by default.

float visibilityThreshold

An optional threshold for deciding when the animation value is considered close enough to the targetValue.

@NonNull String label

An optional label to differentiate from other animations in Android Studio.

Function1<@NonNull FloatUnit> finishedListener

An optional end listener to get notified when the animation is finished.

Returns
@NonNull State<@NonNull Float>

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

animateIntAsState

@Composable
public static final @NonNull State<@NonNull IntegeranimateIntAsState(
    int targetValue,
    @NonNull AnimationSpec<@NonNull Integer> animationSpec,
    @NonNull String label,
    Function1<@NonNull IntegerUnit> finishedListener
)

Fire-and-forget animation function for Int. 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.

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

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

Parameters
int targetValue

Target value of the animation

@NonNull AnimationSpec<@NonNull Integer> animationSpec

The animation that will be used to change the value through time. Physics animation will be used by default.

@NonNull String label

An optional label to differentiate from other animations in Android Studio.

Function1<@NonNull IntegerUnit> finishedListener

An optional end listener to get notified when the animation is finished.

Returns
@NonNull State<@NonNull Integer>

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

animateIntOffsetAsState

@Composable
public static final @NonNull State<@NonNull IntOffsetanimateIntOffsetAsState(
    @NonNull IntOffset targetValue,
    @NonNull AnimationSpec<@NonNull IntOffset> animationSpec,
    @NonNull String label,
    Function1<@NonNull IntOffsetUnit> finishedListener
)

Fire-and-forget animation function for IntOffset. 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.

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

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

import androidx.compose.animation.core.animateIntOffsetAsState
import androidx.compose.animation.core.animateOffsetAsState
import androidx.compose.runtime.Composable
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.unit.IntOffset

@Composable
fun OffsetAnimation(selected: Boolean) {
    // Animates the offset depending on the selected flag.
    // [animateOffsetAsState] returns a State<Offset> object. The value of the State object is
    // updated by the animation. Here we use that State<Offset> as a property delegate.
    val offset: Offset by animateOffsetAsState(
        if (selected) Offset(0f, 0f) else Offset(20f, 20f)
    )

    // In this example, animateIntOffsetAsState returns a State<IntOffset>. The value of the
    // returned
    // State object is updated by the animation.
    val intOffset: IntOffset by animateIntOffsetAsState(
        if (selected) IntOffset(0, 0) else IntOffset(50, 50)
    )
}
Parameters
@NonNull IntOffset targetValue

Target value of the animation

@NonNull AnimationSpec<@NonNull IntOffset> animationSpec

The animation that will be used to change the value through time. Physics animation will be used by default.

@NonNull String label

An optional label to differentiate from other animations in Android Studio.

Function1<@NonNull IntOffsetUnit> finishedListener

An optional end listener to get notified when the animation is finished.

Returns
@NonNull State<@NonNull IntOffset>

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

animateIntSizeAsState

@Composable
public static final @NonNull State<@NonNull IntSizeanimateIntSizeAsState(
    @NonNull IntSize targetValue,
    @NonNull AnimationSpec<@NonNull IntSize> animationSpec,
    @NonNull String label,
    Function1<@NonNull IntSizeUnit> finishedListener
)

Fire-and-forget animation function for IntSize. 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.

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

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

Parameters
@NonNull IntSize targetValue

Target value of the animation

@NonNull AnimationSpec<@NonNull IntSize> animationSpec

The animation that will be used to change the value through time. Physics animation will be used by default.

@NonNull String label

An optional label to differentiate from other animations in Android Studio.

Function1<@NonNull IntSizeUnit> finishedListener

An optional end listener to get notified when the animation is finished.

Returns
@NonNull State<@NonNull IntSize>

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

animateOffsetAsState

@Composable
public static final @NonNull State<@NonNull OffsetanimateOffsetAsState(
    @NonNull Offset targetValue,
    @NonNull AnimationSpec<@NonNull Offset> animationSpec,
    @NonNull String label,
    Function1<@NonNull OffsetUnit> finishedListener
)

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

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

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

import androidx.compose.animation.core.animateIntOffsetAsState
import androidx.compose.animation.core.animateOffsetAsState
import androidx.compose.runtime.Composable
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.unit.IntOffset

@Composable
fun OffsetAnimation(selected: Boolean) {
    // Animates the offset depending on the selected flag.
    // [animateOffsetAsState] returns a State<Offset> object. The value of the State object is
    // updated by the animation. Here we use that State<Offset> as a property delegate.
    val offset: Offset by animateOffsetAsState(
        if (selected) Offset(0f, 0f) else Offset(20f, 20f)
    )

    // In this example, animateIntOffsetAsState returns a State<IntOffset>. The value of the
    // returned
    // State object is updated by the animation.
    val intOffset: IntOffset by animateIntOffsetAsState(
        if (selected) IntOffset(0, 0) else IntOffset(50, 50)
    )
}
Parameters
@NonNull Offset targetValue

Target value of the animation

@NonNull AnimationSpec<@NonNull Offset> animationSpec

The animation that will be used to change the value through time. Physics animation will be used by default.

@NonNull String label

An optional label to differentiate from other animations in Android Studio.

Function1<@NonNull OffsetUnit> finishedListener

An optional end listener to get notified when the animation is finished.

Returns
@NonNull State<@NonNull Offset>

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

animateRectAsState

@Composable
public static final @NonNull State<@NonNull RectanimateRectAsState(
    @NonNull Rect targetValue,
    @NonNull AnimationSpec<@NonNull Rect> animationSpec,
    @NonNull String label,
    Function1<@NonNull RectUnit> finishedListener
)

Fire-and-forget animation function for Rect. 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.

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

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

val bounds: Rect by animateRectAsState(
    if (enabled) Rect(0f, 0f, 100f, 100f) else Rect(8f, 8f, 80f, 80f))
Parameters
@NonNull Rect targetValue

Target value of the animation

@NonNull AnimationSpec<@NonNull Rect> animationSpec

The animation that will be used to change the value through time. Physics animation will be used by default.

@NonNull String label

An optional label to differentiate from other animations in Android Studio.

Function1<@NonNull RectUnit> finishedListener

An optional end listener to get notified when the animation is finished.

Returns
@NonNull State<@NonNull Rect>

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

animateSizeAsState

@Composable
public static final @NonNull State<@NonNull SizeanimateSizeAsState(
    @NonNull Size targetValue,
    @NonNull AnimationSpec<@NonNull Size> animationSpec,
    @NonNull String label,
    Function1<@NonNull SizeUnit> finishedListener
)

Fire-and-forget animation function for Size. 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.

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

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

val size: Size by animateSizeAsState(
    if (selected) Size(20f, 20f) else Size(10f, 10f))
Parameters
@NonNull Size targetValue

Target value of the animation

@NonNull AnimationSpec<@NonNull Size> animationSpec

The animation that will be used to change the value through time. Physics animation will be used by default.

@NonNull String label

An optional label to differentiate from other animations in Android Studio.

Function1<@NonNull SizeUnit> finishedListener

An optional end listener to get notified when the animation is finished.

Returns
@NonNull State<@NonNull Size>

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

animateValueAsState

@Composable
public static final @NonNull State<@NonNull T> <T extends Object, V extends AnimationVector> animateValueAsState(
    @NonNull T targetValue,
    @NonNull TwoWayConverter<@NonNull T, @NonNull V> typeConverter,
    @NonNull AnimationSpec<@NonNull T> animationSpec,
    T visibilityThreshold,
    @NonNull String label,
    Function1<@NonNull T, Unit> finishedListener
)

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
@NonNull T targetValue

Target value of the animation

@NonNull AnimationSpec<@NonNull T> animationSpec

The animation that will be used to change the value through time. Physics animation will be used by default.

T visibilityThreshold

An optional threshold to define when the animation value can be considered close enough to the targetValue to end the animation.

@NonNull String label

An optional label to differentiate from other animations in Android Studio.

Function1<@NonNull T, Unit> finishedListener

An optional end listener to get notified when the animation is finished.

Returns
@NonNull State<@NonNull T>

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