---
title: "KeyframesWithSplineSpec"
description: "[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:


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:


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"
type: "class"
---

<div class='type'>Class</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>


```kotlin
public class KeyframesWithSplineSpec<T>(public val config: KeyframesWithSplineSpecConfig<T>) :
    DurationBasedAnimationSpec<T>
```


`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:


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:


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


## Secondary Constructors

```kotlin
public constructor(
    config: KeyframesWithSplineSpecConfig<T>,
    @FloatRange(0.0, 1.0) periodicBias: Float,
) : this(config) {
    this.periodicBias = periodicBias
}
```


Constructor that returns a periodic spline implementation.

#### Parameters

| | |
| --- | --- |
| config | Keyframe configuration of the spline, should contain the set of values, timestamps and easing curves to animate through. |
| periodicBias | A value from 0f to 1f, indicating how much the starting or ending velocities are modified respectively to achieve periodicity. |




## Code Examples

### KeyframesBuilderForDpOffsetWithSplines
```kotlin
@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
```kotlin
@OptIn(ExperimentalAnimationSpecApi::class)
fun KeyframesBuilderForIntOffsetWithSplines() {
    keyframesWithSpline {
        durationMillis = 200
        IntOffset(0, 0) at 0
        IntOffset(500, 100) at 100
        IntOffset(400, 50) at 150
    }
}
```

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

### PeriodicKeyframesWithSplines
```kotlin
@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),
    )
}
```