CODEWITHSUNDEEP
androidandroid-animation
Pol Hallen
Pol Hallen

Reputation: 1872

Animation fade in and out

Using this code I only have a fade in, I'm looking for how to add a fade out as well. I've added another xml called "fadeout" but I can't integrate it in my code.

ImageView imageView = (ImageView)findViewById(R.id.imageView);
Animation fadeInAnimation = AnimationUtils.loadAnimation(this, R.anim.fadein);
imageView.startAnimation(fadeInAnimation);

button1.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        imageView.startAnimation(fadeInAnimation);
    }
}

fadein.xml

<?xml version="1.0" encoding="UTF-8"?>
  <set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0" 
     android:interpolator="@android:anim/accelerate_interpolator" 
   android:duration="Your Duration(in milisecond)"
    android:repeatCount="infinite"/>
 </set>

Upvotes: 31

Views: 122057

Answers (9)

Qazi Fahim Farhan
Qazi Fahim Farhan

Reputation: 2196

Today, I got stuck with this problem. This worked for me:


    @JvmStatic
    fun setFadeInFadeOutAnimation(v: View?) {
        val fadeIn = ObjectAnimator.ofFloat(v, "alpha", 0.0f, 1f)
        fadeIn.duration = 300
        val fadeOut = ObjectAnimator.ofFloat(v, "alpha", 1f, 0.0f)
        fadeOut.duration = 2000

        fadeIn.addListener(object : AnimatorListenerAdapter(){
            override fun onAnimationEnd(animation: Animator?) {
                fadeOut.start()
            }
        })
        fadeIn.start()
    }

Upvotes: 1

ShadeToD
ShadeToD

Reputation: 489

You can do this also in kotlin like this:

    contentView.apply {
        // Set the content view to 0% opacity but visible, so that it is visible
        // (but fully transparent) during the animation.
        alpha = 0f
        visibility = View.VISIBLE

        // Animate the content view to 100% opacity, and clear any animation
        // listener set on the view.
        animate()
                .alpha(1f)
                .setDuration(resources.getInteger(android.R.integer.config_mediumAnimTime).toLong())
                .setListener(null)
    }

read more about this in android docs

Upvotes: 1

Icaro Mota
Icaro Mota

Reputation: 932

I´ve been working in Kotlin (recommend to everyone), so the syntax might be a bit off. What I do is to simply to call:

v.animate().alpha(0f).duration = 200

I think that, in Java, it would be the following.:

v.animate().alpha(0f).setDuration(200);

Try:

private void hide(View v, int duration) {
    v.animate().alpha(0f).setDuration(duration);
}

private void show(View v, int duration) {
    v.animate().alpha(1f).setDuration(duration);
}

Upvotes: 18

UTTAM
UTTAM

Reputation: 327

FOR FADE add this first line with your animation's object.

.animate().alpha(1).setDuration(2000);

FOR EXAMPLEI USED LottieAnimation

Upvotes: 0

Deepak PK
Deepak PK

Reputation: 69

Please try the below code for repeated fade-out/fade-in animation

AlphaAnimation anim = new AlphaAnimation(1.0f, 0.3f);
    anim.setRepeatCount(Animation.INFINITE);
    anim.setRepeatMode(Animation.REVERSE);
    anim.setDuration(300);
view.setAnimation(anim); // to start animation
view.setAnimation(null); // to stop animation

Upvotes: 0

Hope to learn something here
Hope to learn something here

Reputation: 79

we can simply use:

public void animStart(View view) {
    if(count==0){
        Log.d("count", String.valueOf(count));
        i1.animate().alpha(0f).setDuration(2000);
        i2.animate().alpha(1f).setDuration(2000);
        count =1;
    }
    else if(count==1){
        Log.d("count", String.valueOf(count));
        count =0;
        i2.animate().alpha(0f).setDuration(2000);
        i1.animate().alpha(1f).setDuration(2000);
    }
}

where i1 and i2 are defined in the onCreateView() as:

    i1 = (ImageView)findViewById(R.id.firstImage);
    i2 = (ImageView)findViewById(R.id.secondImage);

count is a class variable initilaized to 0.

The XML file is :

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
        <ImageView
            android:id="@+id/secondImage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="animStart"
            android:src="@drawable/second" />
      <ImageView
          android:id="@+id/firstImage"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"

          android:onClick="animStart"
          android:src="@drawable/first" />
    </RelativeLayout>

@drawable/first and @drawable/second are the images in the drawable folder in res.

Upvotes: 1

TWilly
TWilly

Reputation: 4943

Here is my solution. It uses AnimatorSet. AnimationSet library was too buggy to get working. This provides seamless and infinite transitions between fade in and out.

public static void setAlphaAnimation(View v) {
    ObjectAnimator fadeOut = ObjectAnimator.ofFloat(v, "alpha",  1f, .3f);
    fadeOut.setDuration(2000);
    ObjectAnimator fadeIn = ObjectAnimator.ofFloat(v, "alpha", .3f, 1f);
    fadeIn.setDuration(2000);

    final AnimatorSet mAnimationSet = new AnimatorSet();

    mAnimationSet.play(fadeIn).after(fadeOut);

    mAnimationSet.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            mAnimationSet.start();
        }
    });
    mAnimationSet.start();
}

Upvotes: 39

Mina Fawzy
Mina Fawzy

Reputation: 21472

According to the documentation AnimationSet

Represents a group of Animations that should be played together. The transformation of each individual animation are composed together into a single transform. If AnimationSet sets any properties that its children also set (for example, duration or fillBefore), the values of AnimationSet override the child values

AnimationSet mAnimationSet = new AnimationSet(false); //false means don't share interpolators

Pass true if all of the animations in this set should use the interpolator associated with this AnimationSet. Pass false if each animation should use its own interpolator.

ImageView imageView= (ImageView)findViewById(R.id.imageView);
Animation fadeInAnimation = AnimationUtils.loadAnimation(this, R.anim.fade_in);
Animation fadeOutAnimation = AnimationUtils.loadAnimation(this, R.anim.fade_out);
mAnimationSet.addAnimation(fadeInAnimation);
mAnimationSet.addAnimation(fadeOutAnimation);
imageView.startAnimation(mAnimationSet);

I hope this will help you.

Upvotes: 2

SilentKiller
SilentKiller

Reputation: 6942

This is Good Example for Fade In and Fade Out Animation with Alpha Effect

Animate Fade In Fade Out

UPDATED :

check this answer may this help you

Upvotes: 20

Related Questions