Max Pane
Max Pane

Reputation: 35

How to loop the fade in and fade out animation for multiple images?

Please help me out with this. How to create fade-in and fade-out animation for multiple images? How do i loop fade in and out animation for multiple images?

{
    final ImageView image = (ImageView)findViewById(R.id.imageView2);
    final Animation animationFadeIn = AnimationUtils.loadAnimation(this, R.anim.fade_in);
    final Animation animationFadeOut = AnimationUtils.loadAnimation(this, R.anim.fade_out);

    Animation.AnimationListener animListener = new Animation.AnimationListener(){

        @Override
        public void onAnimationStart(Animation animation) {
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            image.setImageResource(R.drawable.picture001);
            image.startAnimation(animationFadeIn);
        }
    };
    image.startAnimation(animationFadeOut);
    animationFadeOut.setAnimationListener(animListener);
}

Upvotes: 2

Views: 2016

Answers (1)

Ferdous Ahamed
Ferdous Ahamed

Reputation: 21736

Add a count variable and use this variable in onAnimationEnd() to change image when previous image animation ends.

Here is the working code:

{
    final ImageView image = (ImageView)findViewById(R.id.imageView2);
    final Animation animationFadeIn = AnimationUtils.loadAnimation(this, R.anim.fade_in);
    final Animation animationFadeOut = AnimationUtils.loadAnimation(this, R.anim.fade_out);

    Animation.AnimationListener animListener = new Animation.AnimationListener(){

        // Required to change the image
        int count = 0;

        @Override
        public void onAnimationStart(Animation animation) {
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
        }

        @Override
        public void onAnimationEnd(Animation animation) {

            if (animation == animationFadeIn) {

                // Start fade-out animation
                image.startAnimation(animationFadeOut);

            } else if (animation == animationFadeOut) {

                count++;

                // Set next image after fading out previous image
                switch (count) {
                    case 1:
                        image.setImageResource(R.drawable.picture002);
                        image.startAnimation(animationFadeIn);
                        break;
                    case 2:
                        image.setImageResource(R.drawable.picture003);
                        image.startAnimation(animationFadeIn);
                        break;
                    case 3:
                        image.setImageResource(R.drawable.picture004);
                        image.startAnimation(animationFadeIn);
                        break;
                    default:
                        break;
                }
            }
        }
    };

    // Set listener to animation
    animationFadeIn.setAnimationListener(animListener);
    animationFadeOut.setAnimationListener(animListener);

    // Start fade-in animation
    image.setImageResource(R.drawable.picture001);
    image.startAnimation(animationFadeIn);

}

activity.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</RelativeLayout>

fade_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >

    <alpha
        android:duration="1000"
        android:fromAlpha="0.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="1.0" />

</set>

fade_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true" >

    <alpha
        android:duration="1000"
        android:fromAlpha="1.0"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toAlpha="0.0" />

</set>

Hope this will help~

Upvotes: 2

Related Questions