I would like to make a simple animation. My logo is divided in 4 parts :
1|2
3|4
I would like to fadein-out each part, but only one after the other : 1 -> 2 -> 4 -> 3 -> 1...
I have no problem with this, but sometimes my animation is not synchronized and the 4 parts animate simultaneously :
final ImageView logo1 = (ImageView) v.findViewById(R.id.logo1);
logo1.clearAnimation();
final ImageView logo2 = (ImageView) v.findViewById(R.id.logo2);
logo2.clearAnimation();
final ImageView logo3 = (ImageView) v.findViewById(R.id.logo3);
logo3.clearAnimation();
final ImageView logo4 = (ImageView) v.findViewById(R.id.logo4);
logo4.clearAnimation();
final Animation anim1 = AnimationUtils.loadAnimation(c, R.anim.animlogo);
anim1.setFillAfter(true);
anim1.setStartOffset(0);
final Animation anim2 = AnimationUtils.loadAnimation(c, R.anim.animlogo);
anim2.setStartOffset(anim1.getDuration());
anim2.setFillAfter(true);
final Animation anim3 = AnimationUtils.loadAnimation(c, R.anim.animlogo);
anim3.setStartOffset(anim1.getDuration()+anim2.getDuration());
anim3.setFillAfter(true);
final Animation anim4 = AnimationUtils.loadAnimation(c, R.anim.animlogo);
anim4.setStartOffset(anim1.getDuration()+anim2.getDuration()+anim3.getDuration());
anim4.setFillAfter(true);
anim1.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {
anim1.setStartOffset(anim2.getDuration()+anim4.getDuration()+anim3.getDuration());
logo1.startAnimation(anim1);
}
});
anim2.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {
anim2.setStartOffset(anim1.getDuration()+anim4.getDuration()+anim3.getDuration());
logo2.startAnimation(anim2);
}
});
anim3.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {
anim3.setStartOffset(anim2.getDuration()+anim4.getDuration()+anim1.getDuration());
logo4.startAnimation(anim3);
}
});
anim4.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {}
#Override
public void onAnimationRepeat(Animation animation) {}
#Override
public void onAnimationEnd(Animation animation) {
anim4.setStartOffset(anim2.getDuration()+anim1.getDuration()+anim3.getDuration());
logo3.startAnimation(anim4);
}
});
logo1.startAnimation(anim1);
logo2.startAnimation(anim2);
logo4.startAnimation(anim3);
logo3.startAnimation(anim4);
anim1.startNow();anim2.startNow();anim3.startNow();anim4.startNow();
Any idea ?
Start only anim1:
logo1.startAnimation(anim1);
and in anim1's AnimationListener's onAnimationEnd do:
logo2.startAnimation(anim2);
This way anim2 won't start before anim1 is finished.
Related
I am trying to implement crossfade animation in RecyclerView items. There are two text views which are to be shown one after another with crossfade animation.
Like 1000ms showing TextViewOne -> 500ms to crossfade to TextViewTwo -> 1000ms showing TextViewTwo -> 500ms to crossfade to TextViewOne -> 1000ms showing TextViewOne -> so on...
Can somebody help me with some pointers on this? Thanks in advance.
On exploring multiple articles, I found a solution to this. below is the code snippet.
/**
* Setup crossfade animation on the views
*
* #param firstView First view
* #param secondView Second view
*/
private void setAnimations(#NonNull View firstView, #NonNull View secondView) {
int crossFadeDuration = 500;
int holdDuration = 1000;
ObjectAnimator fadeOutFirstView = ObjectAnimator.ofFloat(firstView, View.ALPHA, 1f, 0f);
fadeOutFirstView.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
firstView.setVisibility(View.GONE);
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
fadeOutFirstView.setInterpolator(new LinearInterpolator());
ObjectAnimator fadeOutSecondView = ObjectAnimator.ofFloat(secondView, View.ALPHA, 1f, 0f);
fadeOutSecondView.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
secondView.setVisibility(View.GONE);
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
fadeOutSecondView.setInterpolator(new LinearInterpolator());
ObjectAnimator fadeInFirstView = ObjectAnimator.ofFloat(firstView, View.ALPHA, 0f, 1f);
fadeInFirstView.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
firstView.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animator animation) {
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
fadeInFirstView.setInterpolator(new LinearInterpolator());
ObjectAnimator fadeInSecondView = ObjectAnimator.ofFloat(secondView, View.ALPHA, 0f, 1f);
fadeInSecondView.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
secondView.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animator animation) {
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
fadeInSecondView.setInterpolator(new LinearInterpolator());
AnimatorSet mAnimationSetForward = new AnimatorSet();
mAnimationSetForward.setDuration(crossFadeDuration);
mAnimationSetForward.playTogether(fadeOutFirstView, fadeInSecondView);
AnimatorSet mAnimationSetReverse = new AnimatorSet();
mAnimationSetReverse.setDuration(crossFadeDuration);
mAnimationSetReverse.playTogether(fadeOutSecondView, fadeInFirstView);
mAnimationSetForward.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
mAnimationSetReverse.setStartDelay(holdDuration);
mAnimationSetReverse.start();
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
mAnimationSetReverse.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
mAnimationSetForward.setStartDelay(holdDuration);
mAnimationSetForward.start();
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
mAnimationSetForward.start();
}
I'm working with some animations in my project :
I have my own animated class :
public class Anim1Foto implements Animator.AnimatorListener {
private ImageView imagen1;
private ImageView imagen2;
public Anim1Foto (ImageView pimagen1,ImageView pimagen2){
this.imagen1 = pimagen1;
this.imagen2 = pimagen2;
}
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
AnimatorSet as = new AnimatorSet();
ObjectAnimator anim = ObjectAnimator.ofFloat(imagen1, "translationY", 0,200);
anim.setDuration(2500);
as.playSequentially(anim);
as.start();
imagen1.setVisibility(View.INVISIBLE);
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
}
What i want to do is to translate my Imageview and then make it disappear with "setVisibility(INVISIBLE)" but what i'm getting is that the imageview don't appear at all at the beginnig, after making some tests it lead me to the conclusion : the visibility is being affected before the animatorSet start's....I'm guessing wrong? if so what would be a correct way to do this?
Please try with this:-
public class Anim1Foto implements Animator.AnimatorListener {
private ImageView imagen1;
private ImageView imagen2;
public Anim1Foto (ImageView pimagen1,ImageView pimagen2){
this.imagen1 = pimagen1;
this.imagen2 = pimagen2;
}
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
AnimatorSet as = new AnimatorSet();
ObjectAnimator anim = ObjectAnimator.ofFloat(imagen1, "translationY", 0,200);
anim.setDuration(2500);
as.playSequentially(anim);
as.start();
anim.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
imagen1.setVisibility(View.INVISIBLE);
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
}
How can I make a e.g. Fade out animation for a floating view that don't has a parent layout. This code works fine for everything nested inside layouts. Is there an option to make this possible for parents which are displayed in a floating service?
Code:
protected void FadeAnimation(View animationview, boolean fadein)
{
if(fadein){
//Fade in Animation
Animation animationFadeIn = AnimationUtils.loadAnimation(this, R.anim.introfadein);
animationFadeIn.setFillAfter(true);
animationFadeIn.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
animationview.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
animationview.setAnimation(animationFadeIn);
} else {
//Fade out Animation
Animation animationFadeOut = AnimationUtils.loadAnimation(this, R.anim.introfadeout);
animationFadeOut.setFillAfter(true);
animationFadeOut.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
animationview.setVisibility(View.GONE);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
animationview.setAnimation(animationFadeOut);
}
}
Thanks for your help! :)
I am trying the following code in Andorid for animations
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.lay);
rel = (LinearLayout) findViewById(R.id.rel);
rel.setBackgroundDrawable(getResources().getDrawable(R.drawable.gradient_background));
animation = new AlphaAnimation(1, 0);
animation.setDuration(500);
animation.setInterpolator(new LinearInterpolator());
animation.setRepeatCount(3);
rel.startAnimation(animation);
animation1 = new AlphaAnimation(1, 0);
animation1.setDuration(1500);
animation1.setInterpolator(new LinearInterpolator());
animation1.setRepeatCount(3);
animationchala();
}
public void animationchala(){
animation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
public void onAnimationEnd(Animation animation) {
animation.setAnimationListener(null);
rel.startAnimation(animation1);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
animation1.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation1) {
}
public void onAnimationEnd(Animation animation1) {
animation1.setAnimationListener(null);
rel.startAnimation(animation);
}
#Override
public void onAnimationRepeat(Animation animation1) {
}
});
}
the code works for the first time.
when animation ends animation1 is started , then animation1 ends and animation is started again, but now when animation1 has to start again it stops, how can I repeat the animations one after the other infinitely
The problem is in your case that you are setting your animationListeners to null when you started new animation. This makes them stop after you started animation. Just re-arrange your codes like this;
public void animationchala(){
animation.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
public void onAnimationEnd(Animation animation) {
rel.startAnimation(animation1);
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
animation1.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation1) {
}
public void onAnimationEnd(Animation animation1) {
rel.startAnimation(animation);
}
#Override
public void onAnimationRepeat(Animation animation1) {
}
});
}
I have a series of animations that I call in series like so:
final Animation anim1 = AnimationUtils.loadAnimation(thisObject, R.anim.animation1);
final Animation anim2 = AnimationUtils.loadAnimation(thisObject, R.anim.animation2);
final Animation anim3 = AnimationUtils.loadAnimation(thisObject, R.anim.animation3);
final Animation anim4 = AnimationUtils.loadAnimation(thisObject, R.anim.animation4);
anim1.setAnimationListener(new AnimationListener()
{
public void onAnimationStart(Animation animation) { }
public void onAnimationRepeat(Animation animation) { }
public void onAnimationEnd(Animation animation)
{
image.startAnimation(anim2);
}
});
anim2.setAnimationListener(new AnimationListener()
{
public void onAnimationStart(Animation animation) { }
public void onAnimationRepeat(Animation animation) { }
public void onAnimationEnd(Animation animation)
{
image.startAnimation(anim3);
}
});
// etc...
view.startAnimation(anim1);
While this works, the image snaps back to its original position for a split second between each animation. I've defined android:fillAfter as true in all my animation XML files, but this doesn't seem to change anything. Is there a way to prevent this snap between animations? Or is there a better way to achieve the same effect?