KeyframesSpec creates a VectorizedKeyframesSpec animation.

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 KeyframesSpecConfig.at. VectorizedKeyframesSpec allows very specific animation definitions with a precision to millisecond.

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 Easing by use of the KeyframesSpecConfig.using function.

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 tween), however for 2-dimensional values you may animate them using arcs of quarter of an Ellipse with KeyframesSpecConfig.using and ArcMode:

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 KeyframesWithSplineSpec.

Summary

Nested types

Holder class for building a keyframes animation.

KeyframesSpecConfig stores a mutable configuration of the key frames, including durationMillis, delayMillis, and all the key frames.

Public constructors
Cmn

Public functions
open VectorizedKeyframesSpec<V>
<V : AnimationVector> vectorize(converter: TwoWayConverter<T, V>)

Creates a VectorizedAnimationSpec with the given TwoWayConverter.
Cmn

Public properties
KeyframesSpec.KeyframesSpecConfig<T>
Cmn

Public constructors

KeyframesSpec

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

Public functions

vectorize

Cmn
Added in 1.8.0-alpha07
open fun <V : AnimationVector> vectorize(converter: TwoWayConverter<T, V>): VectorizedKeyframesSpec<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.0.0
val config: KeyframesSpec.KeyframesSpecConfig<T>