MotionEffect

MotionEffect

This new motion helper in 2.1 let you automatically add keyframes to the views it references, depending on their overall movement direction.

To better understand where this is useful, take the following example:

The default transition between the two states do a linear interpolation -- the result is confusing and not pleasant.

If we look at this example, we can identify elements that are moving west only (2, 3, 6, 9), and others moving in a different pattern (1, 4, 5, 7, 8):

We can use MotionEffect to apply a fade effect to those elements, giving a much more pleasant result:

You can look at this example to see it in action:

<androidx.constraintlayout.motion.widget.MotionLayout ... >
    <TextView android:id="@+id/t1" ... />
    <TextView android:id="@+id/t2" ... />
    <TextView android:id="@+id/t3" ... />
    <TextView android:id="@+id/t4" ... />
    <TextView android:id="@+id/t5" ... />
    <TextView android:id="@+id/t6" ... />
    <TextView android:id="@+id/t7" ... />
    <TextView android:id="@+id/t8" ... />
    <TextView android:id="@+id/t9" ... />

    <androidx.constraintlayout.helper.widget.MotionEffect
        android:id="@+id/fade"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="t1,t2,t3,t4,t5,t6,t7,t8,t9"
    />
</androidx.constraintlayout.motion.widget.MotionLayout>    

By default the effect will apply a fade out / fade in, which you can control with

        app:fadeMove_start="keyframe"
        app:fadeMove_alpha="alpha"
        app:fadeMove_end="keyframe"