[KeyframesWithSplineSpec] creates a keyframe based [DurationBasedAnimationSpec] using the Monotone cubic Hermite spline to interpolate between the values in [config].
KeyframesBuilderForDpOffsetWithSplines
@OptIn(ExperimentalAnimationSpecApi::class)
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
}
}
KeyframesBuilderForIntOffsetWithSplines
@OptIn(ExperimentalAnimationSpecApi::class)
fun KeyframesBuilderForIntOffsetWithSplines() {
keyframesWithSpline {
durationMillis = 200
IntOffset(0, 0) at 0
IntOffset(500, 100) at 100
IntOffset(400, 50) at 150
}
}
KeyframesBuilderForOffsetWithSplines
@OptIn(ExperimentalAnimationSpecApi::class)
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
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),
)
}