Class

KeyframesWithSplineSpec

KeyframesWithSplineSpec creates a keyframe based DurationBasedAnimationSpec using the Monotone cubic Hermite spline to interpolate between the values in config.

KeyframesBuilderForOffsetWithSplines

@OptIn(ExperimentalAnimationSpecApi::class)
@Sampled
fun KeyframesBuilderForOffsetWithSplines() {
    keyframesWithSpline {
        durationMillis = 200
        Offset(0f, 0f) at 0
        Offset(500f, 100f) at 100
        Offset(400f, 50f) at 150
    }
}

PeriodicKeyframesWithSplines

@OptIn(ExperimentalAnimationSpecApi::class)
@Composable
@Sampled
fun PeriodicKeyframesWithSplines() {
    var alpha by remember { mutableFloatStateOf(0f) }
    LaunchedEffect(Unit) {
        animate(
            initialValue = 0f,
            targetValue = 0f,
            animationSpec =
                infiniteRepeatable(
                    // With a periodicBias of 0.5f it creates a similar animation to a sinusoidal
                    // curve
                    // so the transition as the animation repeats is completely seamless
                    animation =
                        keyframesWithSpline(periodicBias = 0.5f) {
                            durationMillis = 2000

                            1f at 1000 using LinearEasing
                        },
                    repeatMode = RepeatMode.Restart,
                ),
        ) { value, _ ->
            alpha = value
        }
    }
    Image(
        imageVector = Icons.Filled.Favorite,
        contentDescription = null,
        modifier = Modifier.size(150.dp).graphicsLayer { this.alpha = alpha },
        colorFilter = ColorFilter.tint(Color.Red),
    )
}

KeyframesBuilderForIntOffsetWithSplines

@OptIn(ExperimentalAnimationSpecApi::class)
@Sampled
fun KeyframesBuilderForIntOffsetWithSplines() {
    keyframesWithSpline {
        durationMillis = 200
        IntOffset(0, 0) at 0
        IntOffset(500, 100) at 100
        IntOffset(400, 50) at 150
    }
}

KeyframesBuilderForDpOffsetWithSplines

@OptIn(ExperimentalAnimationSpecApi::class)
@Sampled
fun KeyframesBuilderForDpOffsetWithSplines() {
    keyframesWithSpline {
        durationMillis = 200
        DpOffset(0.dp, 0.dp) at 0
        DpOffset(500.dp, 100.dp) at 100
        DpOffset(400.dp, 50.dp) at 150
    }
}
Jetpack Compose beyond MaterialFree components, screens and templates for apps that don’t look like Google’s. Copy them into your app, or let your coding agent add them.Browse for free

Content updated: