8

I have motionLayout animation with the transition:

<Transition
        app:constraintSetEnd="@+id/end"
        app:constraintSetStart="@+id/start">
        <OnSwipe
            app:dragDirection="dragUp"
            app:dragScale="0.1"
            app:touchAnchorId="@id/my_scrollview" />
</Transition>

but the animation works too fast for me. I want to slow it down. I tried setting dragScale=0.1, maxAcceleration=1, maxVelocity=1 but it does'n affect the animation speed. How can I slow it down?

UPDATE: Issue was fixed in newer version of constraintlayout and seems to be working on "2.0.4"

3
  • 1
    Have you found any solution to it?
    – Bulu
    Commented Jan 30, 2020 at 2:50
  • @Bulu nope, used what was recommended in the docs but it didn't work, maybe it was already fixed
    – Rainmaker
    Commented Jan 31, 2020 at 1:14
  • Please without the drag scale does the scroll animation happen very fast, I think I’m having similar issue.
    – Paul Okeke
    Commented Jan 20, 2021 at 14:02

3 Answers 3

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

    <OnSwipe 
        motion:touchAnchorId="@id/view"
        motion:dragDirection="dragDown"
        motion:maxVelocity="20"
        motion:maxAcceleration="20"/>
 </Transition>

Short answer: modify duration, touchAnchorId, maxVelocity, maxAcceleration. turning up the velocity and acceleration and down the duration

Long answer

In general there are 2 phases to the animation of an on swipe When you finger is touching the "drag phase" when it is not "fling phase"

  1. Drag Phase The Drag Phase the animation tracks your finger. If you don't set a touchAnchorId then dragging across the whole screen takes you from start to end. If you set touchAnchorId the drag matches the velocity of the view you select. The drag of the distance the view moves takes you from start to end.
  2. Fling Phase The start of the fling the speed is set to the speed at the end of the Drag Phase. The goal becomes get to the start or end within the duration. accelerating or decelerating to a maximum velocity.

So for the above example if you drag to the middle and mouse up it will try to get you to the end within one second first accelerating at 20 (DDp/s2) to max v of 20 (Dp/ds) coast till the time is right such that it decelerates at 20 coming to a stop at the end.

Thinking of it as a car maxVelocity is the top speed. maxAcceleration is the 0-60 time. and duration is how much time you have to get there.

dragScale is a multiplier of the drag to progress calculated in the Drag Phase

I am simplifying many of other details but this is already getting complex.

1

According to the Android Developer documentation the Transition class has an attribute you can set in your XML file called android:duration. Try using it by specifying the amount of time (in milliseconds) that the transition should run.

1
  • 4
    I tried duration but it doesn't work for swipe. The animation time is not constant - the faster you swipe - the faster the animation goes.
    – Rainmaker
    Commented Sep 27, 2019 at 2:59
1

I ended up removing my <OnSwipe> from my MotionScene and using my MotionLayout's Transition listener and my RecyclerView's Scroll listener to check the direction of a scroll and trigger the corresponding transition.

Create some member varables to track the transition state:

    private boolean mTransitioningToEnd = false;
    private boolean mTransitioningToStart = false;

Then, in your Activity/Fragment's onCreate():

    int endState = motionLayout.getEndState();
    int startState = motionLayout.getStartState();

    motionLayout.setTransitionListener(new MotionLayout.TransitionListener() {
        @Override
        public void onTransitionStarted(MotionLayout motionLayout, int startId, int endId) {
        }

        @Override
        public void onTransitionChange(MotionLayout motionLayout, int startId, int endId, float progress) {
        }

        @Override
        public void onTransitionCompleted(MotionLayout motionLayout, int currentId) {
            // Update transition variables when completed
            if(currentId == startState){
                mTransitioningToStart = false;
            }else if(currentId == endState){
                mTransitioningToEnd = false;
            }
        }

        @Override
        public void onTransitionTrigger(MotionLayout motionLayout, int triggerId, boolean positive, float progress) {
        }
    });

    myRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
            int currentState = motionLayout.getCurrentState();
            int threshold = 25; // Use a threshold to compare significant scroll motion

            // Check for significant vertical motion
            // and that we're not already transitioning
            if(dy > threshold && currentState != endState && !mTransitioningToEnd){
                motionLayout.transitionToEnd();

                // Track the transition
                mTransitioningToEnd = true;
                mTransitioningToStart = false;
            }else if(dy < -threshold && currentState != startState && !mTransitioningToStart){
                motionLayout.transitionToStart();

                // Track the transition
                mTransitioningToStart = true;
                mTransitioningToEnd = false;
            }


            super.onScrolled(recyclerView, dx, dy);
        }
    });
    

This isn't necessarily an ideal method. It will play the full transition in either direction at the duration set in the MotionScene. But it doesn't directly correspond to the scroll amount so it won't stop the transition midway if you're looking for partial progress.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.