30天学习笔记 -day 27-Motion Editor(下篇)

昨天制作了按钮由下往上的动画，今天要加上变化，让昨天的动画看起来不那麽单调。

加入< KeyFrameSet >

<?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:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">

        <!-- 动画样式 -->
        <OnSwipe motion:dragDirection="dragUp"
            motion:touchAnchorId="@id/button"
            motion:touchAnchorSide="top"/>
        <KeyFrameSet>
            <KeyPosition
                motion:motionTarget="@+id/button"
                motion:framePosition="75"
                motion:keyPositionType="pathRelative"
                motion:percentY="-0.25" />
            <KeyPosition
                motion:motionTarget="@+id/button"
                motion:framePosition="25"
                motion:keyPositionType="pathRelative"
                motion:percentY="0.25" />
            <KeyAttribute
                motion:motionTarget="@+id/button"
                motion:framePosition="50"
                android:alpha="0.1" />
        </KeyFrameSet>
    </Transition>

    ...下面都一样 故省略..
</MotionScene>

KeyPosition: 位置的变化
KeyAttribute: 属性的变化

• motion:framePosition="75"表示从动画开始到动画结束的的进度到75%的部分
• motion:keyPositionType=""使用的座标种类

1. parentRelative：父类别的左上角为原点，原点往右为x轴，原点往下为y轴。
2. deltaRelative： constraintSetStart至constraintSetEnd，constraintSetStart为原点，往右为x轴，往上为y轴。
3. pathRelative： constraintSetStart为原点，constraintSetStart至constraintSetEnd所连成的线为x轴，垂直的方向为y轴。

还是不知道差别的可以到此了解

成果:

CustomAttribute

自订义属性

<?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">
    ...上面的设定跟刚刚一样 故省略...

    <ConstraintSet android:id="@+id/start">
        <Constraint
            motion:layout_constraintVertical_bias="0.877"
            android:layout_height="wrap_content"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            android:layout_width="wrap_content"
            android:id="@+id/button" >
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#00FF99" />
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="#555555" />
        </Constraint>

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            motion:layout_constraintVertical_bias="0.109"
            android:layout_height="wrap_content"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            android:layout_width="wrap_content"
            android:id="@+id/button" >
            <CustomAttribute
                motion:attributeName="backgroundColor"
                motion:customColorValue="#C59EFB" />
            <CustomAttribute
                motion:attributeName="textColor"
                motion:customColorValue="#0000FF" />
        </Constraint>
    </ConstraintSet>
</MotionScene>

我将开启的button跟button text改了颜色，当动画结束时会做颜色的变化

成果: