# KeyframesWithSplineSpec

Artifact: [androidx.compose.animation:animation-core](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/core/AnimationSpec.kt+class:androidx.compose.animation.core.KeyframesWithSplineSpec) Added in [1.6.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.6.0) Common/All
- Cmn

  ```
  class KeyframesWithSplineSpec<T : Any?> : DurationBasedAnimationSpec<T>
  ```

*** ** * ** ***

`https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesWithSplineSpec` creates a keyframe based `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/DurationBasedAnimationSpec` using the Monotone cubic Hermite spline to interpolate between the values in `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesWithSplineSpec#config()`.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesWithSplineSpec` may be used to animate any n-dimensional values, but you'll likely use it most to animate positional 2D values such as `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Offset`. For example:

```kotlin
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 `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesWithSplineSpec#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:

```kotlin
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 `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesWithSplineSpec#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

```kotlin
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
}
```

```kotlin
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 |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#keyframesWithSpline(kotlin.Function1)` |   |

## Summary

| ### Nested types |
|---|
| `class https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> : https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpecBaseConfig<T, https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframeEntity<T>>` Keyframe configuration class for `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesWithSplineSpec`. |

| ### Public constructors |
|---|---|
| `<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesWithSplineSpec#KeyframesWithSplineSpec(androidx.compose.animation.core.KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig)( config: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T> )` | Cmn |
| `<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesWithSplineSpec#KeyframesWithSplineSpec(androidx.compose.animation.core.KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig,kotlin.Float)( config: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T>, periodicBias: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html )` Constructor that returns a periodic spline implementation. | Cmn |

| ### Public functions |
|---|---|---|
| `open https://developer.android.com/reference/kotlin/androidx/compose/animation/core/VectorizedDurationBasedAnimationSpec<V>` | `<V : https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationVector> https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesWithSplineSpec#vectorize(androidx.compose.animation.core.TwoWayConverter)(converter: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/TwoWayConverter<T, V>)` Creates a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/VectorizedAnimationSpec` with the given `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/TwoWayConverter`. | Cmn |

| ### Public properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T>` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesWithSplineSpec#config()` | 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: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T>` | Keyframe configuration of the spline, should contain the set of values, timestamps and easing curves to animate through. |
| `periodicBias: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | A value from 0f to 1f, indicating how much the starting or ending velocities are modified respectively to achieve periodicity. |

## Public functions

### vectorize

Cmn

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

Creates a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/VectorizedAnimationSpec` with the given `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/TwoWayConverter`.

The underlying animation system operates on `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationVector`s. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationSpec` will be converted to `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationVector` to animate. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/VectorizedAnimationSpec` describes how the converted `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationVector` should be animated. E.g. The animation could simply interpolate between the start and end values (i.e.`https://developer.android.com/reference/kotlin/androidx/compose/animation/core/TweenSpec`), or apply spring physics to produce the motion (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/SpringSpec`), etc)

| Parameters |
|---|---|
| `converter: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/TwoWayConverter<T, V>` | converts the type `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationSpec` from and to `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationVector` type |

## Public properties

### config

Cmn Added in [1.6.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.6.0)

```
val config: KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T>
```