Search code examples
androidviewobjectanimator

ImageViews flickering before they should be visible


I have an Activity with a toolbar (which is part of the SharedElements Activity entering animation) and below that toolbar are three ImageViews horizontally next to each other. In their XML implementation all three are set INVISIBLE.

What I'm trying to do is, to animate them sequentially "dropping" from behind the toolbar. My implemenation is this:

 int delay = 500;
    for (int y = 0; y < 3; y++) {

        ObjectAnimator oa = ObjectAnimator.ofFloat(imageViews[y],
                "translationY", -300, 0);
        oa.setDuration(600);
        oa.setStartDelay(delay);
        oa.start();
        imageViews[y].setVisibility(View.VISIBLE);
        delay = delay+100;
    }
}

As you can see, I'm iterating through the three ImageViews and start a animation for each one to go from a -300 X-position (which is behind the toolbar) to their normal position. This animation works great - just as I want it to be, but the problem is, that right before all ImageViews are briefly flickering which I can't explain. I tried debugging, but while I'm going through the lines of that part my screen stays black. So I can't determine where/why the Views become visible.

Maybe you can help me to find my mistake.

Here's a gif of the srtange behaviour.


Thank you, this is my working Code:

For all three ImageViews:

ObjectAnimator anim1Pin = ObjectAnimator.ofFloat(img_pinned, "translationY", -300, 0);
    anim1Pin.setDuration(ANIMATON_DURATION);
    anim1Pin.setStartDelay(300);
    anim1Pin.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {
            img_pinned.setVisibility(View.VISIBLE);
        }

        @Override
        public void onAnimationEnd(Animator animation) {

        }

        @Override
        public void onAnimationCancel(Animator animation) {

        }

        @Override
        public void onAnimationRepeat(Animator animation) {

        }
    });

And the AnimatorSet:

AnimatorSet animatorSet = new AnimatorSet();
    animatorSet.playTogether(anim1Pin, anim2Alarm, anim3LED);
    animatorSet.start();

Solution

  • Few things, first, the problem may be as simple as setting the visiblity state to GONE and then after animation starts, setting it to visible. However, I would also use AnimatorSet to play the animations together and add the delay rather than do it in a loop. If you use AnimatorSet there is an onAnimationStart method in AnimationListener that you can use the set the visible to VISIBLE rather than do it how you have to ensure that they become visible at the right time.