昨天製作了按鈕由下往上的動畫，今天要加上變化，讓昨天的動畫看起來不那麼單調。

加入< 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改了顏色，當動畫結束時會做顏色的變化

成果: