Synchronize animation on multiple views

Question

I would like to make a simple animation. My logo is divided in 4 parts :

1|2

3|4

I would like to fadein-out each part, but only one after the other : 1 -> 2 -> 4 -> 3 -> 1... I have no problem with this, but sometimes my animation is not synchronized and the 4 parts animate simultaneously :

final ImageView logo1 = (ImageView) v.findViewById(R.id.logo1);
    logo1.clearAnimation();
    final ImageView logo2 = (ImageView) v.findViewById(R.id.logo2);
    logo2.clearAnimation();
    final ImageView logo3 = (ImageView) v.findViewById(R.id.logo3);
    logo3.clearAnimation();
    final ImageView logo4 = (ImageView) v.findViewById(R.id.logo4);
    logo4.clearAnimation();

    final Animation anim1 = AnimationUtils.loadAnimation(c, R.anim.animlogo);
    anim1.setFillAfter(true);
    anim1.setStartOffset(0);
    final Animation anim2 = AnimationUtils.loadAnimation(c, R.anim.animlogo);
    anim2.setStartOffset(anim1.getDuration());
    anim2.setFillAfter(true);
    final Animation anim3 = AnimationUtils.loadAnimation(c, R.anim.animlogo);
    anim3.setStartOffset(anim1.getDuration()+anim2.getDuration());
    anim3.setFillAfter(true);
    final Animation anim4 = AnimationUtils.loadAnimation(c, R.anim.animlogo);
    anim4.setStartOffset(anim1.getDuration()+anim2.getDuration()+anim3.getDuration());
    anim4.setFillAfter(true);

    anim1.setAnimationListener(new AnimationListener() {

        @Override
        public void onAnimationStart(Animation animation) {}

        @Override
        public void onAnimationRepeat(Animation animation) {}

        @Override
        public void onAnimationEnd(Animation animation) {
            anim1.setStartOffset(anim2.getDuration()+anim4.getDuration()+anim3.getDuration());
            logo1.startAnimation(anim1);
        }
    });

    anim2.setAnimationListener(new AnimationListener() {

        @Override
        public void onAnimationStart(Animation animation) {}

        @Override
        public void onAnimationRepeat(Animation animation) {}

        @Override
        public void onAnimationEnd(Animation animation) {
            anim2.setStartOffset(anim1.getDuration()+anim4.getDuration()+anim3.getDuration());
            logo2.startAnimation(anim2);
        }
    });

    anim3.setAnimationListener(new AnimationListener() {

        @Override
        public void onAnimationStart(Animation animation) {}

        @Override
        public void onAnimationRepeat(Animation animation) {}

        @Override
        public void onAnimationEnd(Animation animation) {
            anim3.setStartOffset(anim2.getDuration()+anim4.getDuration()+anim1.getDuration());
            logo4.startAnimation(anim3);
        }
    });

    anim4.setAnimationListener(new AnimationListener() {

        @Override
        public void onAnimationStart(Animation animation) {}

        @Override
        public void onAnimationRepeat(Animation animation) {}

        @Override
        public void onAnimationEnd(Animation animation) {
            anim4.setStartOffset(anim2.getDuration()+anim1.getDuration()+anim3.getDuration());
            logo3.startAnimation(anim4);
        }
    });
    
    logo1.startAnimation(anim1);
    logo2.startAnimation(anim2);
    logo4.startAnimation(anim3);
    logo3.startAnimation(anim4);
    
    anim1.startNow();anim2.startNow();anim3.startNow();anim4.startNow();

Any idea ?

start animation for second view in OnAnimationEnd for first view. http://stackoverflow.com/a/4112620/2624806 help to clear animation for first view. — CoDe, Feb 18 '14 at 11:50

score 2 · Accepted Answer · answered May 09 '12 at 19:29

2

Start only anim1:

logo1.startAnimation(anim1);

and in anim1's AnimationListener's onAnimationEnd do:

logo2.startAnimation(anim2);

This way anim2 won't start before anim1 is finished.

answered May 09 '12 at 19:29

aleb

2,440
1
23
43

Synchronize animation on multiple views

1 Answers1