Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android alpha animation fadein fadeout with delays

I want to do a very simple alpha animation but I cannot find a valid way.

The idea is to perform this animation over a view:

  1. alpha from 0 to 1 of 1 second
  2. hold alpha at 1 for 5 seconds
  3. alpha from 1 to 0 of 1 second
  4. hold alpha at 0 for 5 seconds.
  5. start again on 1.

I've tried to implement that with an AnimationSet as:

AnimationSet animationSet = new AnimationSet(true);  Animation animation1 = new AnimationUtils.loadAnimation(this, android.R.anim.fade_in); animation1.setDuration(1000);  Animation animation2 = new AnimationUtils.loadAnimation(this, android.R.anim.fade_out); animation2.setDuration(1000); animation2.setStartOffset(5000);  Animation animation3 = new AlphaAnimation(0.0f, 0.0f); animation3.setDuration(4000) animation3.setStartOffset(6000);  animationSet.add(animation1); animationSet.add(animation2); animationSet.add(animation3); 

etc..

but it seams that the third animation do a mess with all the alpha animations, I supose that this cause an internal incoherence in the way that Android manage this type of animation.

Any idea?

Thank you.

like image 701
zegnus Avatar asked Jul 21 '10 10:07

zegnus


People also ask

How do you fade animation on Android?

To use Fade In or Fade Out animations in our android applications, we need to define a new XML file with <alpha> tag like as shown below. For Fade In animation, we need to increase the alpha value from 0 to 1 like as shown below. <? xml version="1.0" encoding="utf-8"?>

What is Alpha animation in Android?

An Alpha Animation is animation that controls the alpha level of an object, i.e. fading it in and out.


2 Answers

Ok Keep in mind these 2 points to solve this


  • If I want to animate 1.0f to 0.0f after 5 seconds with an animation duration of 1 seconds, this is ultimately a 1 second animation with a pause of 5 seconds.

    To acheive this:

    1. setDuration(1000) (it has a 1 second duration)
    2. setStartOffset(5000) (it will start after 5 seconds)

  • You only need 2 animations that will loop forever.

    1.0.0f to 1.0f with 5 seconds pause and 1 second duration

    2.1.0f to 0.0f with 5 seconds pause and 1 second duration


And here is the code:

    animation1 = new AlphaAnimation(0.0f, 1.0f);     animation1.setDuration(1000);     animation1.setStartOffset(5000);      animation2 = new AlphaAnimation(1.0f, 0.0f);     animation2.setDuration(1000);     animation2.setStartOffset(5000);      textView.startAnimation(animation1); 

However to loop forever I will use AnimationListener because repeatCount is buggy:

    animation1 = new AlphaAnimation(0.0f, 1.0f);     animation1.setDuration(1000);     animation1.setStartOffset(5000);      //animation1 AnimationListener     animation1.setAnimationListener(new AnimationListener(){          @Override         public void onAnimationEnd(Animation arg0) {             // start animation2 when animation1 ends (continue)             textView.startAnimation(animation2);         }          @Override         public void onAnimationRepeat(Animation arg0) {             // TODO Auto-generated method stub          }          @Override         public void onAnimationStart(Animation arg0) {             // TODO Auto-generated method stub          }      });      animation2 = new AlphaAnimation(1.0f, 0.0f);     animation2.setDuration(1000);     animation2.setStartOffset(5000);      //animation2 AnimationListener     animation2.setAnimationListener(new AnimationListener(){          @Override         public void onAnimationEnd(Animation arg0) {             // start animation1 when animation2 ends (repeat)             textView.startAnimation(animation1);         }          @Override         public void onAnimationRepeat(Animation arg0) {             // TODO Auto-generated method stub          }          @Override         public void onAnimationStart(Animation arg0) {             // TODO Auto-generated method stub          }      });      textView.startAnimation(animation1); 
like image 107
Sherif elKhatib Avatar answered Oct 07 '22 21:10

Sherif elKhatib


There is a simpler solution to this.

Lets assume that your view is in state GONE. To animate to its visibility:

yourView.setVisibility(View.VISIBLE); yourView.animate().alpha(1).setDuration(300); 

Through the same way you can add animation listeners.

This also works for scale and translation animations.

like image 23
amalBit Avatar answered Oct 07 '22 21:10

amalBit