MotionEffect

MotionEffect is a new MotionHelper in 2.1 that allows you to automatically add keyframes to referenced views based on their overall motion direction. It simplifies the creation of many transition animations.

To better understand what it does, take a look at the following example. This example uses only the Start and end functions of MotionLayout, which automatically creates transitions between the two scenarios.

The default transition between the two states makes for a linear interpolation of the movement effect – the display results in confusion and is not pleasant.

If we look at this example, we can identify elements that move only west (2, 3, 6, 9), while others move in different patterns (1, 4, 5, 7, 8).

We can use a MotionEffect to fade in and out of these elements for a more pleasant effect.

Check out the demo below.

<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>    
Copy the code

Controling which views get the effect

First, only views referenced in a MotionEffect are likely to have an effect.

Second, by default, we automatically calculate the main movement direction of these views (between north, south, east, and west), and only views that move in the opposite direction will get the effect applied to them.

Using motionEffect_move = auto | north | south | east | west, you can override it to specify the effect applied to which direction you want.

You can also use motionEffect_strict = true | false to let this effect is strictly applied to or should not be used to do the elements of the movement.

By default, effects will fade out/fade in; You can control the amount of alpha and the start/end of the effect by using the following properties.

app:motionEffect_start="keyframe"
app:motionEffect_end="keyframe" 
Copy the code

You can also control the alpha and translation values.

app:motionEffect_alpha="alpha"
app:motionEffect_translationX="dimension"
app:motionEffect_translationX="dimension"
Copy the code

Custom effect

You can also refer to a ViewTransition applied to the widget instead of the default fade-in effect. By setting motionEffect_viewTransition, you have unlimited control over the type of effect you want to apply.

For example, to get the following animation.

You can create a ViewTransition and reference it in a MotionEffect.

In the Layout XML:

<androidx.constraintlayout.helper.widget.MotionEffect
...
app:motionEffect_viewTransition="@+id/coolFade"/>
Copy the code

In motion Scene:

<ViewTransition Android :id="@+ ID /coolFade"> <KeyFrameSet> <KeyAttribute Motion :framePosition="20" Android :scaleX="0.1" Android :scaleY="0.1" Android: Alpha ="0" /> <KeyAttribute Motion :framePosition="80" Android :scaleX="0.1" Android :scaleY="0.1" Android :rotation="-90" Android :alpha="0" /> </KeyFrameSet> </ViewTransition>Copy the code

This article is translated from github.com/androidx/co…

I would like to recommend my website xuyisheng. Top/focusing on Android-Kotlin-flutter welcome you to visit