MotionLayoutの例を試してみる(カスタム属性編)

前回は基本的なモーションをやりました。
前回の基本的なモーション

今回はカスタム属性を試してみようと思います。

公式リファレンス

カスタム属性

今回はビューの移動に伴ってビューの背景色を変更しようと思います。

こんな感じです。

sample_scene.xml

<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/move_view"
            motion:touchAnchorSide="top" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@id/move_view"
            android:layout_width="64dp"
            android:layout_height="64dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent" >
            <CustomAttribute
                motion:attributeName="BackgroundColor"
                motion:customColorValue="#D81B60" />

        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@id/move_view"
            android:layout_width="64dp"
            android:layout_height="64dp"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent" >
            <CustomAttribute
                motion:attributeName="BackgroundColor"
                motion:customColorValue="#9999FF" />
        </Constraint>
    </ConstraintSet>
</MotionScene>

CustomAttribute

位置やViewの属性とは直接関連しない属性の遷移を指定できるみたいです。
Constraintの中に設定します。

今回は背景色の変更なのでこちらを指定します。
前回同様、モーション シーケンスの開始と終了、両方に設定します。

 motion:attributeName="backgroundColor"

customColorValueに色を指定します。

 motion:customColorValue="#D81B60" 

 motion:customColorValue="#9999FF" 

以上です！
アニメーションの動きによって色が変わりました。
他にも設定できるみたいなのですが、色変更ぐらいしかあまり使いどころが見つからないので、今回はここまでです。