Search code examples
androidandroid-motionlayout

MotionLayout motionInterpolator with cubic function doesn't work as expected

I have a MotionLayout transition with motioninterpolator set with a cubic-bezier function:

    <Transition
        android:id="@+id/transition01"
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/end"
        motion:motionInterpolator="cubic(.81,.1,.92,1.4)"
        motion:duration="1000">

I am expecting at the end of the transition to have like a "spring" effect at the end of the animation just as shown here: https://cubic-bezier.com/#.81,.1,.92,1.4

But at the end of the animation, the target view just sticks to the final constraints without doing the bounce back effect.

I have also tried motion:motionInterpolator="cubic-bezier(.81,.1,.92,1.4)" without any success.

Does anyone know how I can achieve this with MotionLayout? Thanks for any clue.

here is the version I am using:

implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
Solution

  • CL 2.0 does not support overshoot interpolation (technically extrapolation) . So the output was capped from 0 to 1.

    2.1 does support interpolation. So this will work in 2.1 (currently in alpha)