MotionLayoutの例を試してみる(ImageFilterView)

前回はカスタム属性をやりました。
カスタム属性

今回はImageFilterViewを試していこうと思います。

公式リファレンス

ImageFilterView

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

リンク先に公式サンプルがあります。
ImageFilterView

motion_imagefilter.xml

<androidx.constraintlayout.motion.widget.MotionLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/motionLayout"
    app:layoutDescription="@xml/scene_motion_imagefilter"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/image"
        android:src="@drawable/sunset"
        android:scaleType="centerCrop"
        android:layout_width="match_parent"
        android:layout_height="300dp" />

</androidx.constraintlayout.motion.widget.MotionLayout>

ImageFilterView

彩度、輝度、色温度など画像に対しての設定ができる便利なViewです。

scene_motion_imagefilter.xml

<MotionScene
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/end"
        motion:duration="1000">
        <OnSwipe
            motion:touchAnchorId="@id/image"
            motion:touchAnchorSide="top"
            motion:dragDirection="dragUp" />
    </Transition>


    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@id/image"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent">
            <CustomAttribute
                motion:attributeName="Saturation"
                motion:customFloatValue="1" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@id/image"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent">
            <CustomAttribute
                motion:attributeName="Saturation"
                motion:customFloatValue="0" />
        </Constraint>
    </ConstraintSet>

</MotionScene>

customFloatValue

ImageFilterViewのSaturation対して、customFloatValueの値をstartでは1、endでは0を設定するとendは白黒になり、startはカラーになります。

ちなみにCustomAttributeのattributeNameをBrightnessに変えてみると明るさが変わります。
※Brightnessに0を設定すると真っ黒です。

<CustomAttribute
    motion:attributeName="Brightness"
    motion:customFloatValue="1"/>

以上です！
次はキーフレームの位置を試そうと思います。