Concatenate multiple animations with Constraint Set

user_3994630 0
Viewed 1138

Im trying to do an animation with multiples frames/layouts.

Here is my try, without success:

final Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {

                mConstraintSet.clone(Activity.this,R.layout.include_keyframe_2);
                TransitionManager.beginDelayedTransition(mConstraintLayout);
                mConstraintSet.applyTo(mConstraintLayout);
            }
        }, 500);

        final Handler handler2 = new Handler();
        handler2.postDelayed(new Runnable() {
            @Override
            public void run() {

                mConstraintSet.clone(Activity.this,R.layout.include_keyframe_3);
                TransitionManager.beginDelayedTransition(mConstraintLayout);
                mConstraintSet.applyTo(mConstraintLayout);
            }
        }, 2000);

        final Handler handler3 = new Handler();
        handler3.postDelayed(new Runnable() {
            @Override
            public void run() {

                mConstraintSet.clone(Activity.this,R.layout.include_keyframe_4);
                TransitionManager.beginDelayedTransition(mConstraintLayout);
                mConstraintSet.applyTo(mConstraintLayout);
            }
        }, 5000);

Its possible to do something like this?

android-constraintlayout android
1 Answers

There is this recursive way which is better than using handlers.

//CALL THIS WHEREVER YOU WANT
animate(500, R.layout.include_keyframe_2);

private void animate(final int delay, final int keyframe){
    mConstraintSet.clone(this, keyframe);

    AutoTransition transition = new AutoTransition();
    transition.setStartDelay(delay);
    transition.addListener(new Transition.TransitionListener() {
        @Override
        public void onTransitionStart(Transition transition) { }

        @Override
        public void onTransitionEnd(Transition transition) {
            int targetKeyframe;
            switch (keyframe){
                case R.layout.include_keyframe_2:
                    animate(1500, include_keyframe_3);
                    break;
                case R.layout.include_keyframe_3:
                    animate(2500, include_keyframe_4);
                    break;
            }
        }

        @Override
        public void onTransitionCancel(Transition transition) { }

        @Override
        public void onTransitionPause(Transition transition) { }

        @Override
        public void onTransitionResume(Transition transition) { }
    });
    TransitionManager.beginDelayedTransition(mConstraintLayout, transition);

    mConstraintSet.applyTo(mConstraintLayout);
}

Another solution involves using the TransitionSet class. It depends on the keyframes' xml content.

    mConstraintSet.clone(this, R.layout.example);

    TransitionSet transition = new TransitionSet();
    transition.setOrdering(TransitionSet.ORDERING_SEQUENTIAL);
    transition
            .addTransition(fadeOut)
            .addTransition(changeBounds)
            .addTransition(fadeIn);
    TransitionManager.beginDelayedTransition(mConstraintLayout, transition);

    mConstraintSet.applyTo(mConstraintLayout);
user_49632330
Related