In order to achieve complex and cool interactive logic, Android always needs to implement its own custom View, or use coordinatorLayout to customize its behavior, until it comes to MotionLayout, which is not too cool. And before the development of cocos can interface editing animation effects have similar second

MotionLayout

app:layoutDescription="@xml/scene"
Copy the code

Specify the MotionScene for this motionLayout. It simply points to a scene. That scene defines which view moves how, for how long, and how to trigger the motion

app:motionDebug="SHOW_PATH" 
Copy the code

Whether to display debugging information

SHOW_PATH Displays the movement path

Start ->end (progress:100.0) state=end

SHOW_All Displays all information

NO_DEBUG don’t show

app:showPaths="true"
Copy the code

Same as above, display the motion path

MotionScene

The MotionScene element has Transition, ConstraintSet and stateset elements

StateSet: Describes system support states (optional)

ConstraintSet: A ConstraintLayout constraint + other view-related attributes that specify the attributes and positions of all views at a schedule

Transition: Describes a Transition between two states or constraint sets. A Transition element can specify two constraintsets

A simple motionScene

<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="500">
        <OnSwipe
            motion:dragDirection="dragRight"
            motion:touchAnchorId="@id/button"
            motion:touchAnchorSide="middle" />
    </Transition>
    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@id/button">
            <Layout
                android:layout_width="64dp"
                android:layout_height="64dp"
                motion:layout_constraintStart_toStartOf="parent"/>
        </Constraint>
    </ConstraintSet>
    <ConstraintSet
        android:id="@+id/end"
        motion:deriveConstraintsFrom="@id/start">
        <Constraint android:id="@id/button">
            <Layout
                android:layout_width="64dp"
                android:layout_height="64dp"
                motion:layout_constraintEnd_toEndOf="parent" />
        </Constraint>
    </ConstraintSet>
</MotionScene>
Copy the code

Look at the example above, which has a Transition and two constraintsets under the MotionScene element,

The Transition of the motion: constraintSetStart = “@ + id/start” and motion: constraintSetEnd = “@ + id/end” attribute just pointed to the two ConstraintSet id, The OnSwipe element means that the transition is triggered by sliding

ConstraintSet elements each contain a Constraint. Each ConstraintSet is a collection of all view states for a schedule, and each Constraint is the attribute and position of the view for a schedule. Then, under each Constraint element there is a Layout element that describes the position of its view.

Transition

constraintSetStart

ConstraintSet specifies the ConstraintSet at the start of the animation (progress=0)

constraintSetEnd

ConstraintSet specifies what to do when the animation ends (progress=100)

duration

Animation length, in milliseconds

motionInterpolator

Animation interpolators, those familiar with Android animation should know, currently have linear, rebound, slow in, slow out, slow in and out

staggered

(float) A method of quickly stagger object movement

autoTransition

The first time the animation is automatically executed, there are several values to choose from, animation with, no animation

Transition has three elements

<OnSwipe>

Slide trigger animation

<OnClick>

Click to trigger animation

<KeyFrameSet>

Describes a set of keyframes that modify ConstraintSet animation.

OnClick

motionTarget

Id of the view that triggered the click

clickAction

Click to perform multiple actions :toggle, transitionToEnd, transitionToStart, jumpToEnd, jumpToStart

OnSwipe

touchAnchorId

Id of the view to slide

touchRegionId

Limit the area where touches can start within the view’s boundaries (even if the view is invisible)

touchAnchorSide

On the edge of the moving object {} under the left right | | |

maxVelocity

Limit the maximum speed (progress/second) of the animation to touch up. The default 4

dragDirection

From which side sliding on {pull drop-down | | drop-down | right}

maxAcceleration

How fast the animation speeds up and slows down while touching up. The default of 1.2

dragScale

Adjust the scaling coefficient of the stroke. (for example, 0.5 will require you to move twice as far)

moveWhenScrollAtTop

Whether sliding is scrolling and a view (such as RecyclerView or NestedScrollView) does scrolling and conversion happen at the same time

autoComplete

Slide auto animation to start or end, default true. Tips: Turning this feature off and using time cycles may result in continuous animation.

KeyFrameSet key frames

<KeyPosition>

Controls layout position during animation

<KeyAttribute>

Controls the properties of the view during animation

<KeyCycle>

Controls the oscillation of position relative to post-layout properties during animation

<KeyTimeCycle>

Controls time oscillations during animation relative to post-layout properties

<KeyTrigger>

Triggers a callback to the code at the fixed point of the animation

Motion :framePosition=”50″ 0-100), which indicates the time at which the current frame is in the animation

Motion :motionTarget indicates which view to apply to

Motion :keyPositionType=”deltaRelative”

ParentRelative: Coordinate system with parent layout (Android coordinate system)

The line from start to end is the X axis, and the Y axis is the X axis 90 degrees clockwise

1. DeltaRelative: an expanded axis with a starting point of (0,0) and an ending point of (1,1)

KeyCycle and KeyTimeCycle are not well understood, as illustrated here

KeyCycle:

waveShape

Cycle type, the shape of the generated waves {sin | square | triangle | sawtooth | reverseSawtooth | cos | bounce}

wavePeriod

The number of cycles of a cycle

waveOffset

Attribute offset

transitionPathRotate

Loops that apply to rotation relative to the view movement path

progress

Call the setProgress(float) method on this view (used to communicate with nested ConstraintLayouts, etc.).

<KeyCycle motion:framePosition="80" Motion :motionTarget="@+id/button" Motion :wavePeriod="0.5" Motion :waveShape="sin" android:translationY="30dp"/>Copy the code

If you want to change the rotation to the translationY (android:translationY), you can change the rotation to the translationY (Android :translationY)

(0 -> value) (0 -> value) (0 -> value

KeyTimeCycle:

One is periodic motion in motion, and one is periodic motion in frame

The larger the Motion :wavePeriod is, the faster it changes

You can use two Keytimecycles to surround the view in place

<KeyTimeCycle
    motion:motionTarget="@+id/button"
    motion:wavePeriod="1"
    android:translationX="6dp"
    motion:waveShape="sin"
    />
<KeyTimeCycle
    motion:motionTarget="@+id/button"
    motion:wavePeriod="1"
    android:translationY="6dp"
    motion:waveShape="cos"
    />
Copy the code

Go around in circles:

<KeyTimeCycle
    motion:motionTarget="@+id/button"
    motion:wavePeriod="1"
    android:rotation="-180"
    motion:waveShape="sawtooth"
    />
Copy the code

ConstraintSet

There is only one ID tag and you can have multiple Constraint elements

Constraint

android:id

Specify the VIEW ID

[ConstraintLayout attributes]

Any attribute of ConstraintLayout

[Standard View attributes]

A collection of view properties supported by the system

transitionEasing

Define a slow motion curve used to from this animation (such as curve (1.0, 0,0,1.0)) or keyword {standard | accelerate | decelerate | linear}

pathMotionArc

Path to arc (a quarter of a circle) or keywords {startVertical | startHorizontal | none}

transitionPathRotate

(float) The path taken by the rotating object relative to it

drawPath

The drawn path layout will be animated

progress

Call the setProgress(float) method on this view (used to communicate with nested ConstraintLayouts, etc.).

<CustomAttribute>

Custom attributes

<Layout>

Attribute of ConstraintLayout, such as layout_constraintTop_toTopOf

<PropertySet>

Currently only visible, alpha, motionProgress,layout_constraintTag.

<Transform>

All view transformation apis, such as Android: Rotation.

<Motion>

Motion layout control commands such as transitionEasing and pathMotionArc

CusTomAttribute User-defined attribute

attributeName

The name of the property. Case sensitive. MyAttr will find the method setMyAttr(…)

customColorValue

Color value, see setMyAttr(int)

customIntegerValue

Plastic value

customFloatValue

Floating point value

customStringValue

A string value

customDimension

Definitions of dimension

customBoolean

Boolean value