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 ?
My first suggestion is to simplify most of your code. Android has 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