infiniteRepeatable

Function

Common
public fun <T> infiniteRepeatable(
    animation: DurationBasedAnimationSpec<T>,
    repeatMode: RepeatMode = RepeatMode.Restart,
    initialStartOffset: StartOffset = StartOffset(0),
): InfiniteRepeatableSpec<T>

Creates a InfiniteRepeatableSpec that plays a DurationBasedAnimationSpec (e.g. TweenSpec, KeyframesSpec) infinite amount of iterations.

For non-infinitely repeating animations, consider repeatable.

initialStartOffset can be used to either delay the start of the animation or to fast forward the animation to a given play time. This start offset will not be repeated, whereas the delay in the animation (if any) will be repeated. By default, the amount of offset is 0.

Parameters

animationanimation that will be repeated
repeatModewhether animation should repeat by starting from the beginning (i.e. RepeatMode.Restart) or from the end (i.e. RepeatMode.Reverse)
initialStartOffsetoffsets the start of the animation
Common

Deprecated This method has been deprecated in favor of the infinite repeatable function that accepts start offset.

public fun <T> infiniteRepeatable(
    animation: DurationBasedAnimationSpec<T>,
    repeatMode: RepeatMode = RepeatMode.Restart,
): InfiniteRepeatableSpec<T>

Code Examples

InfiniteProgressIndicator

@Composable
fun InfiniteProgressIndicator() {
    // This is an infinite progress indicator with 3 pulsing dots that grow and shrink.
    @Composable
    fun Dot(scale: State<Float>) {
        Box(
            Modifier.padding(5.dp)
                .size(20.dp)
                .graphicsLayer {
                    scaleX = scale.value
                    scaleY = scale.value
                }
                .background(Color.Gray, shape = CircleShape)
        )
    }
    val infiniteTransition = rememberInfiniteTransition()
    val scale1 =
        infiniteTransition.animateFloat(
            0.2f,
            1f,
            // No offset for the 1st animation
            infiniteRepeatable(tween(600), RepeatMode.Reverse),
        )
    val scale2 =
        infiniteTransition.animateFloat(
            0.2f,
            1f,
            infiniteRepeatable(
                tween(600),
                RepeatMode.Reverse,
                // Offsets the 2nd animation by starting from 150ms of the animation
                // This offset will not be repeated.
                initialStartOffset = StartOffset(offsetMillis = 150, StartOffsetType.FastForward),
            ),
        )
    val scale3 =
        infiniteTransition.animateFloat(
            0.2f,
            1f,
            infiniteRepeatable(
                tween(600),
                RepeatMode.Reverse,
                // Offsets the 3rd animation by starting from 300ms of the animation. This
                // offset will be not repeated.
                initialStartOffset = StartOffset(offsetMillis = 300, StartOffsetType.FastForward),
            ),
        )
    Row {
        Dot(scale1)
        Dot(scale2)
        Dot(scale3)
    }
}