KeyframesWithSplineSpec

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

Keyframe configuration class for KeyframesWithSplineSpec.

Public constructors
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>
Cmn

Public constructors

KeyframesWithSplineSpec

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

KeyframesWithSplineSpec

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

Constructor that returns a periodic spline implementation.

Parameters
config: KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T>

Keyframe configuration of the spline, should contain the set of values, timestamps and easing curves to animate through.
periodicBias: @FloatRange(from = 0.0, to = 1.0) Float

A value from 0f to 1f, indicating how much the starting or ending velocities are modified respectively to achieve periodicity.

Public functions

vectorize

Cmn
Added in 1.8.0-alpha06
open fun <V : AnimationVector> vectorize(converter: TwoWayConverter<T, V>): VectorizedDurationBasedAnimationSpec<V>

Creates a VectorizedAnimationSpec with the given TwoWayConverter.

The underlying animation system operates on AnimationVectors. T will be converted to AnimationVector to animate. VectorizedAnimationSpec describes how the converted AnimationVector should be animated. E.g. The animation could simply interpolate between the start and end values (i.e.TweenSpec), or apply spring physics to produce the motion (i.e. SpringSpec), etc)

Parameters
converter: TwoWayConverter<T, V>

converts the type T from and to AnimationVector type

Public properties

config

Cmn
Added in 1.6.0
val config: KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T>