keyframes

public fun <T> keyframes(init: KeyframesSpecConfig<T>.() -> Unit): KeyframesSpec<T>

Creates a KeyframesSpec animation, initialized with init. For example:

Keyframes can also be associated with a particular Easing function:

Values can be animated using arcs of quarter of an Ellipse with KeyframesSpecConfig.using and ArcMode:

For a smooth, curvy animation across all the intervals in the keyframes, consider using keyframesWithSpline instead.

Parameters

Code Examples

FloatKeyframesBuilderInline

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