Is there any way to animate `Offset` in a similar way to `keyframes`, but with smooth curvy lines be...

# compose

[Arkadii Ivanov]

Is there any way to animate Offset in a similar way to keyframes, but with smooth curvy lines between points instead of straight lines?

[romainguy]

@hoford

[Piotr Prus]

Any news on that one?

[Doris Liu]

Could you file a feature request on this. A variation of keyframes that also does curve fitting based on the given points should be feasible.

[romainguy]

@Arkadii Ivanov if you want to do it by hand it’s not very complicated, you would effectively animate a 0..1 value and evaluate for instance a Bézier curve equation to get the final Offset

[Piotr Prus]

I am using TargetBasedAnimation to know exact position of animated object in canvas.

val animationConfig: TargetBasedAnimation<DpOffset, AnimationVector2D>
        get() = TargetBasedAnimation(
            animationSpec = tween(durationMillis = lifespan, easing = easing),
            typeConverter = DpOffset.VectorConverter,
            initialValue = startPoint,
            targetValue = endPoint
        )

How can I change that or use keyframes to have a Bezier curve path for my object from initialValue to targetValue?

[Arkadii Ivanov]

If I understand it correctly, Bezier curve won't go through key frames.

[romainguy]

@Arkadii Ivanov Your key frames in this case are P0 and P3

[romainguy]

P1 and P2 are “control points”, that you use to shape the curve

[Arkadii Ivanov]

Got it. I wanted something simpler. Like I define key frames (points), and it animates smoothly. Will file feature request.

[romainguy]

It’s… not that simple 🙂

[romainguy]

@hoford has been working on something like this

[Doris Liu]

I'll make sure @hoford gets cc'ed on that feature request in case he doesn't see this.

[Doris Liu]

@Arkadii Ivanov could you post the issue id here once you file the FR? Thanks

[hoford]

MotionLayout much of what you are looking.
It supports keyframes for motions.
If you are looking the raw algorithms involved.
It is a MonotonicSpline (which has some properties
which make it more suitable for animations)

MotionTags videos on KeyAttributes & KeyPosition provide a good overview of the capability.
https://www.youtube.com/playlist?list=PLWz5rJ2EKKc-bcyUTIFAr97ZtRkwM7S4y

Demos of the Compose version of MotionLayout are here:

https://github.com/androidx/constraintlayout/tree/main/demoProjects/ExamplesComposeMotionLayout

[Arkadii Ivanov]

@Doris Liu I have submitted a feature request, thanks! b/292114811