I was researching ConstraintLayout and found its subclass MotionLayout. Discover new doors opening to the animation world.

rendering

Making the address

Remember to light a little star

How to use – PartOne

  1. Referenced in the build. Gradle MotionLayout library implementation ‘com. Android. Support. The constraint, the constraint – layout: 2.0.0 – beta 2’ must be more than 2.0 version, MotionLayout is supported only in versions 2.0 or later

  2. Create the MotionScene file and use the App :layoutDescription association. In the < androidx. Constraintlayout. Motion. Widget. MotionLayout > tag to add app: layoutDescription = “@ XML/sample”

Analyze the MotionScene file

MotionScene node


      
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
        <Transition
            app:constraintSetEnd="@id/end"
            app:constraintSetStart="@id/start">
        </Transition>

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

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

The Transition tag specifies the start, end, ConstrainSet.

ConstrainSet represents the corresponding scenario, the layout at the start and the layout at the end

ConstraintSet node

<Constraint id=""> 
    <Motion/> 
    <Layout/> 
    <Transform/> 
    <CustomAttribute/> 
    <PropertySet/>
</Constraint>
Copy the code

Motion model. Arc path, time model, etc. Each control can individually set the time model Layout related Transform animation changes. Rotation, displacement, scaling and other properties. The entire Transition can also be set to interpolator CustomAttribute custom attributes

  • attributeNameWill addset\getReflection finds the real function name, such asbackgroundColorIs calledsetBackgroundColor()function
  • Custom (XXX)Value Indicates the data type of the property

PropertySet Specifies properties such as visibility and alpha

The Transition node

<Transition app:constraintSetStart="@+id/start" app:constraintSetEnd="@+id/end" app:duration="1000">
    <OnSwipe />
    <OnClick />
    <KeyPositionSet >
      <KeyAttribute>
        <CustomAttribute/>
      </KeyAttribute>
      <KeyPostion/>
      <KeyCycle/>
      <KeyTimeCycle/>
    </KeyPositionSet>
</Transition>
Copy the code
OnSwipe label
<OnSwipe app:touchAnchorId="@id/view" 
    app:dragDirection="dragDown"/>
Copy the code


supports parameters in the
node:

  • touchAnchorIdRefers to which control responds to the touch event
  • autoComoleteThe default istrue, automatically returns to the most recent state based on the percentage of animation completed
  • dragDirectionDirection of drag
The OnClick label
<OnClick app:clickAction="toggle"
    app:targetId="@id/toggle"/>
Copy the code


Supports the clickAction parameter in the
node

  • toggleInversion of state
  • transitionToEnd\StartAnimate to the end/start state
  • jumpToEnd/StartNo animation goes straight to the end/start state

The rest of the tags are written next. Write a simple Demo based on the tags above

Demo

The initial state

End state

Code analysis (image)

Directions of use – PartTwo

And then the Transition node up here

KeyPositionSet label
  • app:motionTargetId of the target object
  • app:framePositionPercentage of animation completed (0-100)
KeyAttribute Indicates the attribute relationship word

<KeyAttribute
    app:framePosition="0" 
    app:motionTarget="@id/image_film_cover"
    android:alpha="0">
<CustomAttribute 
    app:attributeName="BackgroundColor"
    app:customColorValue="@color/colorAccent"/>
</KeyAttribute>
Copy the code

You can set attributes such as shift, rotation, and scale, as well as add custom attributes through CustomAttribute

KeyPosition Position key frame

PercentX /Y in keyframes, the percentage of the path within the percentWidth/Height in keyframes, the percentage of the control size change

  • parentRelative

(0,0) is the upper left corner of the parent container

(1,1) is the lower right corner of the parent container

  • deltaRelative

(0,0) is the initial control center

(1,1) is the end control center

  • pathRelative

(0,0) is the initial control center

(1,0) is the end control center