# KeyframesSpec

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.KeyframesSpec) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0) Common/All
- Cmn

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

*** ** * ** ***

`https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec` creates a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/VectorizedKeyframesSpec` animation.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/core/VectorizedKeyframesSpec` animates based on the values defined at different timestamps in the duration of the animation (i.e. different keyframes). Each keyframe can be defined using `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig#(kotlin.Any).at(kotlin.Int)`. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/VectorizedKeyframesSpec` allows very specific animation definitions with a precision to millisecond.

```kotlin
import androidx.compose.animation.core.KeyframesSpec

KeyframesSpec(
    KeyframesSpec.KeyframesSpecConfig<Float>().apply {
        0f at 0 // ms  // Optional
        0.4f at 75 // ms
        0.4f at 225 // ms
        0f at 375 // ms  // Optional
        durationMillis = 375
    }
)
```

For each interval, you may provide a custom `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Easing` by use of the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig#(androidx.compose.animation.core.KeyframesSpec.KeyframeEntity).using(androidx.compose.animation.core.ArcMode)` function.

```kotlin
import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.keyframes

// Use FastOutSlowInEasing for the interval from 0 to 50 ms, and LinearOutSlowInEasing for the
// time between 50 and 100ms
keyframes<Float> {
    durationMillis = 100
    0f at 0 using FastOutSlowInEasing
    1.5f at 50 using LinearOutSlowInEasing
    1f at 100
}
```

By default, values are animated linearly from one interval to the next (similar to `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#tween(kotlin.Int,kotlin.Int,androidx.compose.animation.core.Easing)`), however for 2-dimensional values you may animate them using arcs of quarter of an Ellipse with `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig#(androidx.compose.animation.core.KeyframesSpec.KeyframeEntity).using(androidx.compose.animation.core.ArcMode)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/ArcMode`:

```kotlin
import androidx.compose.animation.core.ArcMode.Companion.ArcAbove
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.keyframes
import androidx.compose.ui.geometry.Offset

keyframes<Offset> {
    // Animate for 1.2 seconds
    durationMillis = 1200

    // Animate to Offset(100f, 100f) at 50% of the animation using LinearEasing then, animate
    // using ArcAbove for the rest of the animation
    Offset(100f, 100f) atFraction 0.5f using LinearEasing using ArcAbove
}
```

If instead, you wish to have a smooth curvy animation across all intervals, consider using `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesWithSplineSpec`.

## Summary

| ### Nested types |
|---|
| `class https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframeEntity<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> : https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframeBaseEntity<T>` Holder class for building a keyframes animation. |
| `class https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig<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>>` `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig` stores a mutable configuration of the key frames, including `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpecBaseConfig#durationMillis()`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpecBaseConfig#delayMillis()`, and all the key frames. |

| ### Public constructors |
|---|---|
| `<T : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec#KeyframesSpec(androidx.compose.animation.core.KeyframesSpec.KeyframesSpecConfig)(config: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec.KeyframesSpecConfig<T>)` | Cmn |

| ### Public functions |
|---|---|---|
| `open https://developer.android.com/reference/kotlin/androidx/compose/animation/core/VectorizedKeyframesSpec<V>` | `<V : https://developer.android.com/reference/kotlin/androidx/compose/animation/core/AnimationVector> https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec#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/KeyframesSpec.KeyframesSpecConfig<T>` | `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/KeyframesSpec#config()` | Cmn |

## Public constructors

### KeyframesSpec

Cmn

```
<T : Any?> KeyframesSpec(config: KeyframesSpec.KeyframesSpecConfig<T>)
```

## Public functions

### vectorize

Cmn

```
open fun <V : AnimationVector> vectorize(converter: TwoWayConverter<T, V>): VectorizedKeyframesSpec<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.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0)

```
val config: KeyframesSpec.KeyframesSpecConfig<T>
```