CODEWITHSUNDEEP
androidanimationtextviewhandler
Diego Palomar
Diego Palomar

Reputation: 7061

How to animate TextViews sequentially in Android?

I am developing a question game with four possible answers. Every answer is a TextView. What I want is that after the user selects an answer, and before show the next question, the text boxes associated with the answers leave the screen with an animation to the right but in a sequentially way with a small delay. Below an example of how it would be:

                            ---------
                          | Answer 1 |
                           ----------
                  ---------
                | Answer 2 |
                 ----------
         ----------
        | Answer 3 |
         ----------

To schedule the start of the animation of each answer view, after a certain delay, I use the Handler class. The problem is that when run the code, the views leave of the screen not sequentially with a delay, they leave of the screen at the same time and I do not get the desired effect.. Obviously I've tried increasing the delay but it does not solve the problem. Here a snippet of the code I use:

        TextView answerViewA = (TextView) findViewById(R.id.textViewAnswerA);
        TextView answerViewB = (TextView) findViewById(R.id.textViewAnswerB);
        TextView answerViewC = (TextView) findViewById(R.id.textViewAnswerC);
        TextView answerViewD = (TextView) findViewById(R.id.textViewAnswerD);

        ArrayList<TextView> answerViewCollection = new ArrayList<TextView>(
                4);
        answerViewCollection.add(answerViewA);
        answerViewCollection.add(answerViewB);
        answerViewCollection.add(answerViewC);
        answerViewCollection.add(answerViewD);

        final Animation exitAnim = AnimationUtils.makeOutAnimation(
                mContext, true);
        final int delay = 200;

        for (int i = 0; i < answerViewCollection.size(); i++) {

            final View auxView = answerViewCollection.get(i);

            mHandler.postDelayed(new Runnable() {

                @Override
                public void run() {
                    auxView.startAnimation(exitAnim);
                }

            }, delay * i);
        }

My restriction is: android:minSdkVersion="10" . I appreciate any suggestions :)

Upvotes: 3

Views: 1059

Answers (2)

ovmjm
ovmjm

Reputation: 1696

The problem seems to be that you are reusing the same Animation instance to animate different views.

An Animation object is not just an animation description, it is a live animation, holding its own animating state. As a result if you share the same Animation instance, you share the same animating state, hence the same transformation at a given time.

If your minSdkVersion is 10, I think the right way to go is to use an AnimationLayoutController which is specifically designed to

(...) animate a layout's, or a view group's, children. Each child uses the same animation but for every one of them, the animation starts at a different time.

You could also create many Animation instances with different delays but I'm not sure it would be optimal.

Upvotes: 2

minipif
minipif

Reputation: 4866

Here you go:

for (int i = 0; i < answerViewCollection.size(); i++) {
    final View auxView = answerViewCollection.get(i);

    final Animation exitAnim = AnimationUtils.makeOutAnimation(this,
            true);
    exitAnim.setDuration(1000);
    exitAnim.setStartOffset(delay * i);
    auxView.startAnimation(exitAnim);
    auxView.setVisibility(View.INVISIBLE);
}

Upvotes: 0

Related Questions