An-droid An-droid - 1 month ago 5
Java Question

Animated transition between two imageview

On one hand I have a layout with two ImageView :

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView
android:id="@+id/image_cross2"
android:layout_width="wrap_content"
android:layout_height="@dimen/image_size"
android:layout_gravity="top"
android:scaleType="centerCrop" />

<ImageView
android:id="@+id/image_cross1"
android:layout_width="wrap_content"
android:layout_height="@dimen/image_size"
android:layout_gravity="top"
android:scaleType="centerCrop" />
</FrameLayout>


On the other hand i have a list of image ressources :

static int mImages[] = new int[] {
R.drawable.artistes,
R.drawable.couple1,
R.drawable.couple2,
R.drawable.couple3,
R.drawable.enfant,
R.drawable.manege,
R.drawable.manege2,
R.drawable.metropolitain,
R.drawable.panoramique,
R.drawable.sacrecoeur };


i have also a Scheduler made from Handler + postDelayed() to display the images one after another with a timer. This is working fine

my issue is about the transition animation from one imageview to the other, knowing that i have to clean the imageviews each time to avoid OutOfMemoryExceptions :

For now i do that in the schduled callback method :

if (mIndex == mImages.length) {
mIndex = 0; // repeat
}
if (mIndex % 2 != 0) { // pair
mImageCross2.setImageResource(mImages[mIndex++]);
Utils.crossfade(mImageCross2, mImageCross1, 1000/*duration*/);
mImageCross1.setImageResource(0);
} else {
mImageCross1.setImageResource(mImages[mIndex++]);
Utils.crossfade(mImageCross1, mImageCross2, 1000);
mImageCross2.setImageResource(0);
}


with this animation :

public static void crossfade(final ImageView viewIn, final ImageView viewOut, int duration) {
Animation fadeIn = new AlphaAnimation(0, 1);
fadeIn.setDuration(duration);
Animation fadeOut = new AlphaAnimation(1, 0);
fadeOut.setDuration(duration);
fadeOut.setAnimationListener(new AnimationListener() {

@Override
public void onAnimationStart(Animation animation) {
}

@Override
public void onAnimationRepeat(Animation animation) {
}

@Override
public void onAnimationEnd(Animation animation) {
viewOut.setVisibility(View.GONE);
}
});
fadeIn.setAnimationListener(new AnimationListener() {

@Override
public void onAnimationStart(Animation animation) {
}

@Override
public void onAnimationRepeat(Animation animation) {
}

@Override
public void onAnimationEnd(Animation animation) {
viewIn.setVisibility(View.VISIBLE);
}
});
viewOut.startAnimation(fadeOut);
viewIn.startAnimation(fadeIn);
}


The animation is not great, the fade is not really smooth, what can i do to make it more smooth while having to clean the ImageView each times ?

Answer

my first suggestion is to simplify most of your code. Android have this nice little class called TransitionDrawable

so you can have just 1 image view and use the TransitionDrawable:

TransitionDrawable td = new TransitionDrawable( new Drawable[] {
    getResources().getDrawables(mImages[x]),
    getResources().getDrawables(mImages[y])
});
imageView.setImageDrawable(td);

and call the animation on td with

td.startTransition(1000);
 // and
td.reverseTransition(1000);

and keep using the postDelayed to trigger them

Comments