Reputation: 35
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
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