Jetpack Compose version: 1.4.3

Jetpack Compose component used: animateOffsetAsState, KeyframesSpec

Android Studio Build: #IU-231.8109.175

Kotlin version: 1.8.20

This is a feature request. As described in the docs, we can specify AnimationSpec using keyframes, which returns KeyframesSpec.

For example:

val value by animateOffsetAsState(
    targetValue = Offset(x = 0F, y = 1000F),
    animationSpec = keyframes {
        durationMillis = 1000
        Offset(x = 0F, y = 0F) at 0 // ms
        Offset(x = 1000F, y = 500F) at 500 // ms
        Offset(x = 0F, y = 1000F) at 1000 // ms
    },
)

This example animates between the specified coordinates in straight lines. It would be good to be able to enable some kind of interpolation. So that the path is smooth and curvy, instead of sharply changing the direction.

The API could look like this:

val value by animateOffsetAsState(
    targetValue = Offset(x = 0F, y = 1000F),
    animationSpec = keyframes {
        smooth = true // Option #1 (simplest)
        interpolator = cubic(), // Option #2 (more advanced)

        durationMillis = 1000
        Offset(x = 0F, y = 0F) at 0 // ms
        Offset(x = 1000F, y = 500F) at 500 // ms
        Offset(x = 0F, y = 1000F) at 1000 // ms
    },
)

Issue 292114811

Links (5)

Issue metadata