Is it possible to apply different duration to different Constraint in ConstraintSet using MotionLayout?

user_5055481 0
Viewed 2055

I am trying to implement an animation for login screen in which two EditText for user name and password are animated outside the screen and back to the original position with different duration. As in the following this link!. I am able to animate this partially. But I am not able to replicate the delayed animation type motion. I tried to use transition Easing but the effect is not similar.

<Transition
    motion:constraintSetStart="@id/scene_login_start"
    motion:constraintSetEnd="@id/scene_login_end"
    motion:duration="350">

    <KeyFrameSet>
        <KeyPosition
            motion:target="@id/editText_username"
            motion:keyPositionType="pathRelative"
            motion:framePosition="1"
            motion:transitionEasing="accelerate" />

        <KeyPosition
                motion:target="@id/editText_password"
                motion:keyPositionType="pathRelative"
                motion:framePosition="1"
                motion:transitionEasing="linear" />

        <KeyPosition
            motion:target="@id/editText_password"
            motion:keyPositionType="pathRelative"
            motion:framePosition="50"
            motion:transitionEasing="decelerate" />

        <KeyPosition
                motion:target="@id/editText_password"
                motion:keyPositionType="pathRelative"
                motion:framePosition="70"
                motion:transitionEasing="decelerate" />

    </KeyFrameSet>
</Transition>

Is it possible to achieve that type of animation using Motionlayout?

android-motionlayout android
2 Answers

You can control it with KeyPosition. In example below animation for textview will not play until frame 40, than will go to 50 of animation at frame 50 and will finish animation at frame 75. If you will not specify last frame than animation will finish normally at frame 100

    <KeyFrameSet>
        <KeyPosition
            motion:percentY="0"
            motion:percentX="0"

            motion:framePosition="40"
            motion:target="@id/textview" />
        <KeyPosition
            motion:percentY="0.5"
            motion:percentX="0.5"
            motion:framePosition="50"
            motion:target="@id/textview" />

        <KeyPosition
            motion:percentY="1"
            motion:percentX="1"
            motion:framePosition="75"
            motion:target="@id/textview" />
    </KeyFrameSet>
       <ConstraintSet>

       </ConstraintSet>
</MotionScene>
user_15516030

In order to add delay in motion layout we can use the Key Position attribute

So out of 100 Frames position the below code delays the animation upto 53 frames. After 53 frames the animation starts and it goes all the upto 99 frames and at 100th frame the animation gets completed.

enter image description here

<ConstraintSet android:id="@+id/start">
    <Constraint
        android:id="@id/img_sensor_type"
        android:layout_width="304dp"
        android:layout_height="375dp"
        android:layout_marginTop="466dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>

<ConstraintSet android:id="@+id/end">
    <Constraint
        android:id="@id/img_sensor_type"
        android:layout_width="304dp"
        android:layout_height="376dp"
        android:layout_marginTop="266dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>

<Transition
    app:constraintSetEnd="@+id/end"
    app:constraintSetStart="@+id/start"
    app:duration="1700">
    <OnClick
        app:clickAction="toggle"
        app:targetId="@id/img_sensor_type" />
    <KeyFrameSet>
        <KeyPosition
            app:framePosition="53"
            app:motionTarget="@+id/img_sensor_type"
            app:percentX="0"
            app:percentY="0" />
        <KeyPosition
            app:framePosition="99"
            app:motionTarget="@+id/img_sensor_type"
            app:percentX="1"
            app:percentY="1" />
    </KeyFrameSet>

</Transition>
user_96997540
Related