CODEWITHSUNDEEP
androidanimationalphafadeinfadeout
zegnus
zegnus

Reputation: 1457

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.

Upvotes: 40

Views: 75103

Answers (4)

Balry
Balry

Reputation: 77

In my solution, I am using the animation inside a util function for any generic View and I was able to achieved this by defining the values inline this way:

fun View.fadeIn(durationMillis: Long = 250, delay: Long = 1000) {
    this.startAnimation(AlphaAnimation(0F, 1F).apply {
        duration = durationMillis
        startOffset = delay
        fillAfter = true
    })
}

Upvotes: 0

Akhil
Akhil

Reputation: 329

Try This

val shortAnimationDuration = 1000
            yourView.apply {
                alpha = 0f
                animate()
                    .alpha(1f)
                    .setDuration(shortAnimationDuration.toLong())
                    .setListener(object :AnimatorListenerAdapter(){
                        override fun onAnimationEnd(animation: Animator?) {
                           //You can add what you want to do after completing animation
                        }
                    })
            }

This is a Fade in animation. If you want Fade out you just swap the alpha values.

Upvotes: 1

amalBit
amalBit

Reputation: 12181

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.

Upvotes: 20

Sherif elKhatib
Sherif elKhatib

Reputation: 45942

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);

Upvotes: 113

Related Questions