IssueTracker

Jetpack Compose version: 1.2.0 Jetpack Compose component used: Animation

Currently the keyframes() spec API only supports setting a keyframe at a millis point, this means if you change your duration of the whole animation, you will need to change all the millis checkpoints again.

Would it be possible to add another method for keyframes that lets you work in percentages? This would also conform more to the keyframes spec of CSS.

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

Example of such function that works with range:

fun <T> KeyframesSpec.KeyframesSpecConfig<T>.atOffset(
    @FloatRange(from = 0.0, to = 1.0) offset: Float,
    value: T
): KeyframesSpec.KeyframeEntity<T> {
    return value at (durationMillis * offset).roundToInt()
}