KeyframesWithSplineSpec

Artifact: androidx.compose.animation:animation-core

Added in 1.6.0

Cmn

class KeyframesWithSplineSpec<T : Any?> : DurationBasedAnimationSpec

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

KeyframesWithSplineSpec may be used to animate any n-dimensional values, but you'll likely use it most to animate positional 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 also 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
}

See also
`keyframesWithSpline`

Summary

Nested types
`class KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T : Any?> : KeyframesSpecBaseConfig` Keyframe configuration class for `KeyframesWithSplineSpec`.

Public constructors
`<T : Any?> KeyframesWithSplineSpec( config: KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T> )`	Cmn
`<T : Any?> KeyframesWithSplineSpec( config: KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T>, periodicBias: @FloatRange(from = 0.0, to = 1.0) Float )` Constructor that returns a periodic spline implementation.	Cmn

Public functions
`open VectorizedDurationBasedAnimationSpec<V>`	`<V : AnimationVector> vectorize(converter: TwoWayConverter<T, V>)` Creates a `VectorizedAnimationSpec` with the given `TwoWayConverter`.	Cmn

Public properties
`KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T>`	`config`	Cmn

Public constructors