changing images with fade animation

Question

I need to create animation where I will display 3 images. Each image should completely fade in and fade out (slow blink) and then next image should be shown. I have done it by creating 3 animations. Each animation starts the next animation in onAnimationEnd listener:

private void startAnimation() {
   final Animation aniIn = AnimationUtils.loadAnimation(this,
            R.anim.fade_in_out);
   final Animation aniIn1 = AnimationUtils.loadAnimation(this,
            R.anim.fade_in_out);
   final Animation aniIn2 = AnimationUtils.loadAnimation(this,
            R.anim.fade_in_out);

   aniIn.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {
            ivRandom0.setVisibility(View.VISIBLE);
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            ivRandom0.setVisibility(View.INVISIBLE);
            ivRandom1.startAnimation(aniIn1);
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    });
    aniIn1.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {
            ivRandom1.setVisibility(View.VISIBLE);
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            ivRandom1.setVisibility(View.INVISIBLE);
            ivRandom2.startAnimation(aniIn2);
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    });
    aniIn2.setAnimationListener(new Animation.AnimationListener() {
        @Override
        public void onAnimationStart(Animation animation) {

            ivRandom2.setVisibility(View.VISIBLE);
        }

        @Override
        public void onAnimationEnd(Animation animation) {
           showFinal();
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }
    });

   ivRandom0.startAnimation(aniIn);
}

For that animation I have this xml which sets alhpa from 0 to 1 and back to 0:

fade_in_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="300"
    android:fromAlpha="0"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:toAlpha="1"
    android:repeatCount="1"
    android:repeatMode="reverse"
    />
</set>

here is my layout:

<RelativeLayout
        android:id="@+id/images_wrapper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <ImageView
            android:id="@+id/iv_image_random_0"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/img_generator0"
            android:visibility="visible" />

        <ImageView
            android:id="@+id/iv_image_random_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/img_generator1"
            android:visibility="invisible" />

        <ImageView
            android:id="@+id/iv_image_random_2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/img_generator2"
            android:visibility="invisible" />

    </RelativeLayout>

Although this is working, I don't like the nested callbacks. It is also causing memory leak as it is holding reference to imageviews in calbacks.

Is there a better way how to create this kind of animation? Or at least avoid the memory leak? I was trying imageswitcher, but it is causing cross fading of images which I don't want.

Thank you!

Answer 1

you can use ObjectAnimator , it has methods to setDuration and start delays , which you can calculate according to your need.

ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(imageView, "alpha",0, 1);
objectAnimator.setDuration(DEFAULT_ANIMATION_DURATION);
objectAnimator.setStartDelay(milliseconds);
objectAnimator.start();

you can create three different object animators to set accordinglt . for more refer this link

Answer 2

You can use viewswitcher to implement this behaviour. Please see the code below:

layout

<ViewSwitcher
    android:id="@+id/switcher"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:inAnimation="@anim/fade_in"
    android:outAnimation="@anim/fade_out" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:src="@drawable/sunset" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:src="@drawable/clouds" />
</ViewSwitcher>

code

((ViewSwitcher) findViewById(R.id.switcher)).setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View v) {
        ViewSwitcher switcher = (ViewSwitcher) v;

        if (switcher.getDisplayedChild() == 0) {
            switcher.showNext();
        } else {
            switcher.showPrevious();
        }
    }
});

Please refer this link