KeyframesSpec

public class KeyframesSpec<T>(public val config: KeyframesSpecConfig<T>) :
    DurationBasedAnimationSpec<T>

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.

For each interval, you may provide a custom Easing by use of the KeyframesSpecConfig.using function.

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:

If instead, you wish to have a smooth curvy animation across all intervals, consider using KeyframesWithSplineSpec.

Code Examples

FloatKeyframesBuilder

fun FloatKeyframesBuilder() {
    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
        }
    )
}

KeyframesBuilderWithEasing

fun KeyframesBuilderWithEasing() {
    // 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
    }
}

OffsetKeyframesWithArcsBuilder

fun OffsetKeyframesWithArcsBuilder() {
    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
    }
}