KeyframesSpec.KeyframesSpecConfig


KeyframesSpecConfig stores a mutable configuration of the key frames, including durationMillis, delayMillis, and all the key frames. Each key frame defines what the animation value should be at a particular time. Once the key frames are fully configured, the KeyframesSpecConfig can be used to create a KeyframesSpec.

import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.LinearOutSlowInEasing
import androidx.compose.animation.core.keyframes
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.dp

// Use FastOutSlowInEasing for the interval from 0 to 50 ms, and LinearOutSlowInEasing for the
// time between 50 and 100ms
keyframes<DpOffset> {
    durationMillis = 200
    DpOffset(0.dp, 0.dp) at 0 using LinearEasing
    DpOffset(500.dp, 100.dp) at 100 using LinearOutSlowInEasing
    DpOffset(400.dp, 50.dp) at 150
}
See also
keyframes

Summary

Public constructors

Cmn

Public functions

open infix KeyframesSpec.KeyframeEntity<T>
T.at(timeStamp: @IntRange(from = 0) Int)

Adds a keyframe so that animation value will be this at time: timeStamp.

Cmn
open infix KeyframesSpec.KeyframeEntity<T>
T.atFraction(fraction: @FloatRange(from = 0.0, to = 1.0) Float)

Adds a keyframe so that the animation value will be the value specified at a fraction of the total durationMillis set.

Cmn
infix KeyframesSpec.KeyframeEntity<T>

ArcMode applied from this keyframe to the next.

Cmn
infix Unit

This function is deprecated. Use version that returns an instance of the entity so it can be re-used in other keyframe builders.

Cmn

Inherited functions

From androidx.compose.animation.core.KeyframesSpecBaseConfig
infix KeyframesSpec.KeyframeEntity<T>

Adds an Easing for the interval started with the just provided timestamp.

Cmn

Inherited properties

From androidx.compose.animation.core.KeyframesSpecBaseConfig
Int

The amount of time that the animation should be delayed.

Cmn
Int

Duration of the animation in milliseconds.

Cmn

Public constructors

KeyframesSpecConfig

<T : Any?> KeyframesSpecConfig()

Public functions

open infix fun T.at(timeStamp: @IntRange(from = 0) Int): KeyframesSpec.KeyframeEntity<T>

Adds a keyframe so that animation value will be this at time: timeStamp. For example: 0.8f at 150 // ms

Parameters
timeStamp: @IntRange(from = 0) Int

The time in the during when animation should reach value: this, with a minimum value of 0.

Returns
KeyframesSpec.KeyframeEntity<T>

an KeyframeEntity so a custom Easing can be added by with method.

atFraction

open infix fun T.atFraction(fraction: @FloatRange(from = 0.0, to = 1.0) Float): KeyframesSpec.KeyframeEntity<T>

Adds a keyframe so that the animation value will be the value specified at a fraction of the total durationMillis set. For example: 0.8f atFraction 0.50f // half of the overall duration set

Parameters
fraction: @FloatRange(from = 0.0, to = 1.0) Float

The fraction when the animation should reach specified value.

Returns
KeyframesSpec.KeyframeEntity<T>

an KeyframeEntity so a custom Easing can be added by with method

infix fun KeyframesSpec.KeyframeEntity<T>.using(arcMode: ArcMode): KeyframesSpec.KeyframeEntity<T>

ArcMode applied from this keyframe to the next.

Note that arc modes are meant for objects with even dimensions (such as Offset and its variants). Where each value pair is animated as an arc. So, if the object has odd dimensions the last value will always animate linearly.

 

The order of each value in an object with multiple dimensions is given by the applied vector converter in KeyframesSpec.vectorize.

E.g.: RectToVector assigns its values as [left, top, right, bottom] so the pairs of dimensions animated as arcs are: [left, top] and [right, bottom].

with

infix fun KeyframesSpec.KeyframeEntity<T>.with(easing: Easing): Unit

Adds an Easing for the interval started with the just provided timestamp. For example: 0f at 50 with LinearEasing

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
}
Parameters
easing: Easing

Easing to be used for the next interval.

Returns
Unit

the same KeyframeEntity instance so that other implementations can expand on the builder pattern