KeyframesWithSplineSpec

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

KeyframesWithSplineSpec is best used with 2D values such as Offset. For example:

import androidx.compose.animation.core.keyframesWithSpline
import androidx.compose.ui.geometry.Offset

keyframesWithSpline {
    durationMillis = 200
    Offset(0f, 0f) at 0
    Offset(500f, 100f) at 100
    Offset(400f, 50f) at 150
}

You may however, provide a periodicBias value (between 0f and 1f) to make a periodic spline. Periodic splines adjust the initial and final velocity to be the same. This is useful to create smooth repeatable animations. Such as an infinite pulsating animation:

import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.animate
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.keyframesWithSpline
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.graphicsLayer
import androidx.compose.ui.unit.dp

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

The periodicBias value (from 0.0 to 1.0) indicates how much of the original starting and final velocity are modified to achieve periodicity:

• 0f: Modifies only the starting velocity to match the final velocity

• 1f: Modifies only the final velocity to match the starting velocity

• 0.5f: Modifies both velocities equally, picking the average between the two

import androidx.compose.animation.core.keyframesWithSpline
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.unit.IntOffset

keyframesWithSpline {
    durationMillis = 200
    IntOffset(0, 0) at 0
    IntOffset(500, 100) at 100
    IntOffset(400, 50) at 150
}

import androidx.compose.animation.core.keyframesWithSpline
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp

keyframesWithSpline {
    durationMillis = 200
    DpOffset(0.dp, 0.dp) at 0
    DpOffset(500.dp, 100.dp) at 100
    DpOffset(400.dp, 50.dp) at 150
}

Summary

<T : Any?> KeyframesWithSplineSpec(
    config: KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T>
)

<T : Any?> KeyframesWithSplineSpec(
    config: KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T>,
    periodicBias: @FloatRange(from = 0.0, to = 1.0) Float
)

open fun <V : AnimationVector> vectorize(converter: TwoWayConverter<T, V>): VectorizedDurationBasedAnimationSpec<V>

val config: KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T>