motion_scene_part_iii.xml

<?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">


    <!-- Basically with the below code, we are specifying:
        1. To create a Transition Animation. This displays
           the starting layout start, to begin with.
        2. Then when user swipes the button or drags the button
           to the right, we need to animate the button to the right.
        3. The duration of the animation is 1 second.
        4. Once the animation is completed, display the end layout
           layout.
     -->

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@+id/start"
        motion:duration="1000">


        <!-- The OnSwipe is a handler that drives the animation
             based on the user's finger motion.
             1. touchAnchorId: specifies the object we should track
                (here, @+id/button). Note that the id of the button
                defined here is the same as in the starting and ending
                constraintSet.
             2. touchAnchorSide: the side of the object that should
                track your finger (right / left / top / bottom)
             3. dragDirection: the direction of the motion we are
                tracking (dragRight / dragLeft / dragUp / dragDown
                will define how the progress value will be set, from
                0 to 1)
         -->
        <OnSwipe
            motion:dragDirection="dragUp"
            motion:touchAnchorId="@+id/image"
            motion:touchAnchorSide="top" />
    </Transition>


    <!--
       Instead of defining our constraints in a separate
       xml file, we can define it here in the motion scene:
       This is the starting layout for the animation.
       We define a single button here that is to be animated.
     -->
    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/image"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginTop="8dp"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="parent">

            <!--
               Here we have defined the crossfade
               attribute of ImageFilterView. There are many other 
               features of ImageFilterView:
               saturation : 0 = grayscale, 1 = original, 2 = hyper saturated
               contrast : 1 = unchanged, 0 = gray, 2 = high contrast
               warmth : 1 = neutral, 2 = warm (red tint), 0.5 = cold (blue tint)
               crossfade (with app:altSrc)
             -->
            
            <CustomAttribute
                motion:attributeName="crossfade"
                motion:customFloatValue="0" />

        </Constraint>

    </ConstraintSet>

    <!--
       Instead of defining our constraints in a separate
       xml file, we can define it here in the motion scene:
       This is the finishing layout for the animation.
       We define a the same button here that is to be animated.
     -->
    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/image"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginBottom="8dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintEnd_toEndOf="parent">

            <!--
               Here we have defined the crossfade
               attribute of ImageFilterView. There are many other 
               features of ImageFilterView:
               saturation : 0 = grayscale, 1 = original, 2 = hyper saturated
               contrast : 1 = unchanged, 0 = gray, 2 = high contrast
               warmth : 1 = neutral, 2 = warm (red tint), 0.5 = cold (blue tint)
               crossfade (with app:altSrc)
             -->
            <CustomAttribute
                motion:attributeName="crossfade"
                motion:customFloatValue="1" />

        </Constraint>

    </ConstraintSet>

</MotionScene>