StartOffset

public value class StartOffset private constructor(internal val value: Long)

This class defines a start offset for repeatable and infiniteRepeatable. There are two types of start offsets: StartOffsetType.Delay and StartOffsetType.FastForward. StartOffsetType.Delay delays the start of the animation, whereas StartOffsetType.FastForward fast forwards the animation to a given play time and starts it right away.

Secondary Constructors

public constructor(
    offsetMillis: Int,
    offsetType: StartOffsetType = StartOffsetType.Delay,
) : this((offsetMillis * offsetType.value).toLong())

This creates a start offset for repeatable and infiniteRepeatable. offsetType can be either of the following: StartOffsetType.Delay and StartOffsetType.FastForward. offsetType defaults to StartOffsetType.Delay.

StartOffsetType.Delay delays the start of the animation by offsetMillis, whereas StartOffsetType.FastForward starts the animation right away from offsetMillis in the animation.

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)
    }
}