Motionlayout -- realize animation in visual editor

structure MotionLayout Visual interface

In the corresponding XML Under the view editor of the file , Select the following options to convert the view to MotionLayout.

After that, the system will retain the original layout , Generate a scene file , Such as app/src/main/res/xml/activity_main_scene.xml The scene file just generated .

Observe activity_main_scene.xml Code in file , Among them is Transition label , In the visual interface, the corresponding arrow , There are two ConstraintSet label , Corresponding to the two states in the visual interface ,Constraint Is the style of the component in the corresponding state ,Constraint stay ConstraintSet There can be more than one , The specific number depends on the number of components in this state .

<MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration="1000">
       <KeyFrameSet></KeyFrameSet>
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint />
        
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
    </ConstraintSet>
</MotionScene>

go back to activity_main.xml file , We will assemble View Drag to the layout , You can see , At present, there are two states , Corresponding to the state before the animation , And the state after the animation .

Click on different states , You can modify the layout in the corresponding state . Click on ConstraintSet Box on the right “ pen ” Icon , Put this view The component is added to the constraint set in the corresponding state , In this way, the component can display the style of the corresponding setting in the corresponding state .

Foundation sliding

Click on start state , We will View Drag the component to the lower left corner , Click on end state , take View Drag the component to the upper right corner , Click the arrow between the two states , You can enter the key frame page of animation , Let's demonstrate .

Add other animations

Click on start The state or end state , Click to create a good Constraint, Click on “+” You can add animation .

For example, add rotation animation here , The effect is as follows ：

Curvilinear motion

The curve corresponds to the path , Therefore, what is modified is the familiarity of the path , Then click the arrow , Add the attributes shown in the figure in the attribute column , Of course, change the corresponding value to other contents .

The effect is as follows ：

Add click events for animation

The click event is an arrow (Transition) Properties in , So click the arrow , find OnClick, And check the box marked in the figure , This means that clicking anywhere on the screen can trigger the animation of arrow connection .

Click the... Marked in the figure “+” Icon , Click events can be added to a component , Parameter is “targetId”, Value is component id.

The effect is as follows ：

Add interpolator motionInterpolator

Using interpolator can give people different visual effects in the process of animation execution , For example, slow in and slow out , Rebound and other effects when reaching the end .

Use the system's own Interpolator

Customize Interpolator– Use cubic-bezie function

http://yisibl.github.io/cubic-bezier/#.17,.67,.83,.67

Set parameters on the website above , Then use it as a diagram .

The effect is as follows ：

Use of keyframes

Click on the arrow （Transition） You can enter the key frame interface of the corresponding arrow , Then click the icon marked in the figure , You can choose which type of keyframe attribute to set . Yes KeyPosition,KeyAttribute,KeyTrigger,KeyCycle,KeyTimeCycle, Now let's finish them one by one .

KeyPosition

KeyPosition You can set the percentage of the deviation of the component from the original coordinate at a certain frame position .

After setting the parameter value, click “Add” Can be in 50 Add an animation to the position of .

The effect is as follows ：

KeyAttribute

KeyAttribute You can animate attributes at a certain frame position .

Like frames 50 Set the position of rotation Attribute animation , The effect is as follows ：

KeyCycle

KeyCycle You can set the animation set at a certain frame position and the execution cycle of this animation , This period can be some functions of the system , As shown in the figure below .

You can also animate attributes , After setting, it means that the animation is executed with the set function cycle .

The effect is as follows ：

KeyTimeCycle

KeyTimeCycle and KeyCycle similar , It's just KeyTimeCycle The effect will continue .

Create States and implement transitions between States

Now we need to achieve the following animation effects ：

It can be seen that , Now there are three states , Each is a starting state , And two different end states , Before, there were only two states , How to achieve more states . Click the icon selected in the figure to add the status ,ID Is the name of the state ,BasedOn Based on which state .

Then create a Transition, That's the arrow that I've been talking about before .

The end result is as follows ：

Then add a component View To complete the animation effect , Click different states to set the page layout for the corresponding state , With “end” State as an example , As can be seen from the animation above , Again “start” In the state of , Click the yellow one View after , The final yellow View Zoom in , And red View Vanished , So the corresponding “end” The state should be yellow View Zoom in , Red View By setting its alpha The value is 0 To achieve the effect of disappearance . After setting up , The visual interface is such an effect .

Empathy “end2” The status of is also similar to the setting , But don't forget to treat everyone Transition Set click event .

Picture switch animation （ImageFilterView）

Now we want to achieve the following effects , When the picture moves again , Picture content switching .

You need to use ImageFilterView, take ImageFilterView Drag into the layout ,ImageFilterView There are two parameters in , Namely srcCompat and altSrc,srcCompat Represents the picture to be displayed at the beginning ,altSrc Is the picture that will eventually be replaced .

<androidx.constraintlayout.utils.widget.ImageFilterView android:id="@+id/imageFilterView" android:layout_width="150dp" android:layout_height="150dp" android:scaleType="fitXY" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/iu1" app:altSrc="@drawable/iu2" />

At the same time “start” and “end” In state CustomAttributes Column settings crossfade Parameters .

Staggered movement （staggered）

To realize staggered motion, only need to transition again （Transition） Add... To the attribute staggered Parameters

The effect is as follows :