CODEWITHSUNDEEP
androidtextviewtransition
maradev21
maradev21

Reputation: 614

Multiple transition effects with TextViews (Android)

I would like 3 TextViews to appear in sequence (the first one, then when it has finished the second one, and then the third one). I tried this code

tv1.animate().alpha(1f).setDuration(1000);
tv2.animate().alpha(1f).setDuration(1000);
tv3.animate().alpha(1f).setDuration(1000);

but they appear together, so I tried

tv1.animate().alpha(1f).setDuration(1000);
tv2.animate().alpha(1f).setStartDelay(1000).setDuration(1000);
tv3.animate().alpha(1f).setStartDelay(2000).setDuration(1000);

but when I open the app they appear together with no animation. How can I fix this?

Upvotes: 2

Views: 347

Answers (4)

Oğuzhan Döngül
Oğuzhan Döngül

Reputation: 7936

There are many ways to do it.

If you want this by using alpha value, every view you animate must have 0.0f alpha value at the beginning. Then animate them to 1.0f alpha.

For example:

private void animateViews(final ArrayList<View> viewArrayList, long delay){
    for (int i = 0; i < viewArrayList.size(); i++) {
        final int position = i;
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                viewArrayList.get(position).animate().alpha(1f).setDuration(200);
            }
        }, i * delay);
    }
}

You can use this method I wrote.

Usage:

ArrayList<View> arrayList = new ArrayList<>();
arrayList.add(tv1);
arrayList.add(tv2);
arrayList.add(tv3);
animateViews(arrayList,300);

delay parameter means, every animation start 300 * index miliseconds delayed. Also this method has 200 ms duration for alpha animation.

First starts at 0 delay,

Second starts at 1 * 300 ms delay

Third starts at 2 * 300 ms delay

...

..

.

Upvotes: 2

Damian Włodarczyk
Damian Włodarczyk

Reputation: 134

You need set alpha to 0 before start animation

Upvotes: 1

AlexGuerra
AlexGuerra

Reputation: 177

Change the time

tv1.animate().alpha(1f).setDuration(1000);
tv2.animate().alpha(1f).setStartDelay(2000).setDuration(1000);
tv3.animate().alpha(1f).setStartDelay(3000).setDuration(1000);

Upvotes: 0

Adrian Coman
Adrian Coman

Reputation: 1536

Add an AnimationListener and start the next animation when the previous one ends.

AlphaAnimation alphaAnimation = new AlphaAnimation(1f,0f);
alphaAnimation.setFillAfter(true);
alphaAnimation.setAnimationListener(new AnimationListener() {
    public void onAnimationStart(Animation anim)
    {
    };
    public void onAnimationRepeat(Animation anim)
    {
    };
    public void onAnimationEnd(Animation anim)
    {
        nextPuzzle();
    };
}); 
tv1.startAnimation(alphaAnimation);

Upvotes: 1

Related Questions