Question

I am attempting to “chain” two animations together, so when one completes, the other begins. This is working except for one issue. After the first animation is complete, it moves back to it’s original position. I am setting fill after to true. What else am I missing?

Here is the code I am using. Note, this is in a class that is extending LinearLayout.

// FIRST ANIMATION
mAnimation = new TranslateAnimation(0, PANEL_END_X, 0, 0);
mAnimation.setDuration(PANEL_TRANSITION_TIME);
mAnimation.setFillAfter(true);

mAnimation.setAnimationListener(new Animation.AnimationListener() {
    public void onAnimationEnd(Animation animation) {

        // FIRST ANIMATION COMPLETE, CALL THE SECOND ANIMATION
        startAnimation(mAlphaAnimation);
    }
});

// SECOND ANIMATION     
mAlphaAnimation = new AlphaAnimation(1.0f, 0.0f);
mAlphaAnimation.setDuration(PANEL_ALPHA_TRANSITION_TIME);
mAlphaAnimation.setFillAfter(true);

Solution:

The only way I could get this to work to my satisfaction was to use an AnimationSet, but set the starting offset of the second animation to start offset + duration of the first animation, plus a little padding. They did not have to be completely exact in my case.

I tried playing with various values as CommonsWare suggested, but I would always get some type of “snapping” effect where the values would revert to their original value before taking the new one.

Answer 1

After the first animation is complete, it moves back to it’s original position. I am setting fill after to true. What else am I missing?

Animations are transient effects. If you want the effects to be permanent, you have to do that yourself in onAnimationEnd(). In the case of a TranslateAnimation, you need to change the LayoutParams or something of the affected widget to permanently keep it in its end position. Or, if you are translating it off the screen, set the visibility to View.GONE.