Chaining animation of a TextSwitcher and an ImageSwitcher

Question

I have an android studio project with a TextSwitcher and an ImageSwitcher objects already set up and work perfectly (simultaneously). The thing is, I want the animation of the TextSwitcher preformed first, and the animation of the ImageSwitcher second (after the TextSwitcher animation ends). I tried adding an AnimationListener to the TextSwitcher and changing the image of the ImageSwitcher inside the 'onAnimationEnd' method of the AnimationListener but it didn't work.

Does anyone have any ideas? Any help would be greatly appreciated!

EDIT: Manged to get Animation listener to work, here is a snippet of the code:

   private void loadPosts() {
        Post post = posts.get(currentPost);
        //..
        Animation outAnimation = AnimationUtils.loadAnimation(this, R.anim.fade_out);
        outAnimation.setAnimationListener(new NextPostAnimation(post));
        textSwitcher.setOutAnimation(outAnimation);
        textSwitcher.setText("some text");

    }

    private class NextPostAnimation implements Animation.AnimationListener {
        Post post;

        NextPostAnimation (Post post) {
            super();
            this.post = post;
        }
        @Override
        public void onAnimationStart(Animation animation) {
             // TODO Auto-generated method stub
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onAnimationEnd(Animation animation) {
            imageSwitcher1.setImageDrawable(new BitmapDrawable(getResources(), post.image1));
        }
    }

Is there a shorter way to chain the objects animations?

Consider including your code to provide context. See: http://stackoverflow.com/help/mcve — SoAwesomeMan, Jul 01 '16 at 23:25

score -1 · Answer 1 · answered Jul 01 '16 at 23:04

You should put second animation in first animation callback. Below is working code.

$(function(){
 $('.textSwitcher').show(1000, function(){
     $('.imageSwitcher').show(1000);
    });
})

.textSwitcher, .imageSwitcher {
    width: 100px;
    height: 100px;
    display: none;
}
.textSwitcher {
    background: red;
}

.imageSwitcher {
    background: blue;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textSwitcher"></div>
<div class="imageSwitcher"></div>

Chaining animation of a TextSwitcher and an ImageSwitcher

1 Answers1