Animation as an important part in the Android development, in the past, Android developers want to achieve products put forward the demand of animation, animation library or use the property animation system is complete, then compile and found something was wrong, to fine tune, to deploy again, such a repeated through several rounds, both cost of development and learning cost is larger. Recently, I found that MotionLayout can improve the efficiency of the whole process, but when I gave it to my friends, they said that it was a little difficult. I guess the reason might be that there are few MotionLayout tutorials in China. Today, I share my understanding process here.

How to animate

To realize the premise of animation, to know what is animation

The smooth transition of an object from form A to form B

So in order to animate, we need to do two things:

  • Define A and B forms
  • Find a way to smooth the transition

Therefore, in the process of using MotionLayout, we are actually looking for the above two concepts in MotionLayout landing.

First look at the renderings:

How does MotionLayout achieve this effect….

MotionLayout

The official website says:

MotionLayout is a subclass of ConstraintLayout and offer a mix of features between the property animation framework, TransitionManager, and CoordinatorLayout.

So, we can think of a MotionLayout as a ConstraintLayout that declares and executes an animation on its child controls.

How does the system enable MotionLayout to do this? Need to know respectively:

  • MotionScene
  • Transition
  • ConstraintSet
  • Constraint

Introduce them separately from the point of view of use.

Use steps:

Introduce this library, do not repeat, see the official website

The statement MotionLayout

  • For the existing root layout isConstraintLayoutIn Design mode, right-click to call out the menu and select Covert MotionLayout.
  • Just declare it as plain ViewGoup.
<? The XML version = "1.0" encoding = "utf-8"? > <! -- activity_main.xml --> <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_01"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent" android:text="Button" /> </androidx.constraintlayout.motion.widget.MotionLayout>Copy the code

As you can see, the layoutDescription in the appeal description is a bit strange. This attribute refers to scene_01. This is a ‘MotionScene’

The MotionScene is actually an XML file, so let’s take a look at the declared scene_01.xml

<? The XML version = "1.0" encoding = "utf-8"? > <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:motion="http://schemas.android.com/apk/res-auto"> <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" motion:duration="1000"> <OnSwipe motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight" /> </Transition> <ConstraintSet android:id="@+id/start">  <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintStart_toStartOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" motion:layout_constraintBottom_toBottomOf="parent" motion:layout_constraintEnd_toEndOf="parent" motion:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene>Copy the code

Just a quick introduction

<Transition>Define the animation execution process.

  • motion:constraintSetStart 和 motion:constraintSetEndDefine the start and end states of the animation respectively. This state goes throughConstraintDefinition.

<OnSwipe>Defines how animations are triggered

ConstraintDescribes the state of the control performing the animation. In the above description,startDefines thebuttonControl the starting position of the animation.endDefines the end position. As you can see, the definition is the same as using constraint layouts. This significantly reduces learning for developersConstraintThe cost of.

  • ConstraintSetThrough the organizationConstraintComplete multiple control execution animations. We can also declare the following properties for more animations
    • alpha
    • visibility
    • elevation
    • rotation, rotationX, rotationY
    • translationX, translationY, translationZ
    • scaleX, scaleY

So, when you want different animations, just define the desired state in the Constraint, and MotionLayout will help you smooth the transition animation.

More

  • You can getMotionLayoutObject to call the related method.
  • Motion Editor allows you to enjoy the wySIWYG animation process through a visual interface.

reference

  • Developer.android.com/training/co…