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();
}
Related
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) {
}
}
I need to check when the progressbar animation is done.
Then i need to do something.
I already have this:
private ObjectAnimator progressAnimator;
mProgressBar = (ProgressBar)findViewById(R.id.progressbar);
mProgressBar.setMax(1000);
progressAnimator = ObjectAnimator.ofInt(mProgressBar, "progress", 1000, 0);
progressAnimator.setDuration(10000);
progressAnimator.start();
How to check if this animation is done??
Use addListener() method:
progressAnimator.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
//here animation finished
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
You can use:
if(progressAnimator.isRunning()){
//Code here
}
My code looks like that:
objectAnimator animator = ObjectAnimator.ofFloat(view, "rotation", 0f, (float) truePosition);
animator.setDuration(totalTime);
animator.setInterpolator(new DecelerateInterpolator());
animator.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animator) {
einsatz = 0;
disableChips();
imageRoulette.setEnabled(false);
}
#Override
public void onAnimationEnd(Animator animator) {
imageRoulette.setEnabled(true);
imageRoulette.setImageDrawable(null);
imageRoulette.setBackgroundResource(R.drawable.roulette);
enableChips();
printNumberAfterRotation(randPosition);
myBets.clear();
einsatz = -1;
gesamtEinsatz = 0;
}
#Override
public void onAnimationCancel(Animator animator) { }
#Override
public void onAnimationRepeat(Animator animator) { }
});
animator.start();
By now I always have to tap on the view to rotate my image. Is there a way to restart it after 10 seconds?
Do you have any suggestions how to fix it?
#Override
public void onAnimationEnd(Animator animator) {
animation.setStartDelay(10000); // 10 SEC
animation.start();
}
I can't get the circular reveal animation to work.
I think I checked the most obvious things:
It starts, width and height are > 0 and it is visible, no Exception..
I load some data from the internet and display it in the view(fab)
The animation should only play after the download finishes.
TmdbHelper helper = new TmdbHelper();
helper.getMovieById(id, "en", new TmdbHelper.ResultListener() {
#Override
public void onResultReceived(JSONObject result) {
// called when finished downloading
try {
String rating = result.getString("vote_average");
AnimationHelper.circularReveal(fab, 500, 0);
fab.setText(rating);
} catch (JSONException e) {
e.printStackTrace();
}
}
});
AnimationHelper:
public static void circularReveal(final View view, final long duration, long startDelay) {
// get the center for the clipping circle
int cx = (view.getLeft() + view.getRight()) / 2;
int cy = (view.getTop() + view.getBottom()) / 2;
// get the final radius for the clipping circle
int finalRadius = Math.max(view.getWidth(), view.getHeight());
// create the animator for this view (the start radius is zero)
Animator anim =
ViewAnimationUtils.createCircularReveal(view, cx, cy, 0, finalRadius);
anim.setDuration(duration);
anim.setStartDelay(startDelay);
anim.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
view.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animator animation) {
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {}
});
// make the view visible and start the animation
anim.start();
}
I use the circular reveal animation in other parts like this to make sure the view is attached, and it works:
headerContainer.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
headerContainer.getViewTreeObserver().removeOnGlobalLayoutListener(this);
AnimationHelper.circularReveal(headerContainer, 500, 200);
}
});
Perhaps you should erase this line inside your onResultRecieved():
fab.setVisibility(View.VISIBLE);
My assumption is that your circular reveal method is working just fine. It is because of you have made the FAB visible before the animation even begin, you can't see it in action.
As an addition, those lines you've shown which is working doesn't have fab.setVisibility(View.VISIBLE) called anywhere in it.
1st Approach:
Try Transition Listener.
getWindow().getSharedElementExitTransition().addListener(new Transition.TransitionListener() {
#Override
public void onTransitionStart(Transition transition) {
}
#Override
public void onTransitionEnd(Transition transition) {
}
#Override
public void onTransitionCancel(Transition transition) {
}
#Override
public void onTransitionPause(Transition transition) {
}
#Override
public void onTransitionResume(Transition transition) {
}
});
2nd Approach: Try setting start delay and listener to the reveal animation and when animation starts then set the view visible
if (Build.VERSION.SDK_INT >= 21) {
Animator anim = ViewAnimationUtils.createCircularReveal(viewRoot, cx, cy, 0, finalRadius);
anim.setStartDelay(300);
anim.setDuration(1000);
anim.setInterpolator(new DecelerateInterpolator());
anim.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
viewRoot.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animator animation) {
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
anim.start();
}
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
anim.start();
I'm trying to animate buttons with fade in animation using AnimatorSet
Button fades in > Click button > Remaining buttons fade out
So in order to do this, I want to set the onClickListner after the animation is completed, but that doesn't seem to work. Clicking a button in the middle of the animation triggers the onClick action:
setQuestion = new AnimatorSet();
setQuestion.playSequentially(fadeinAnimationQ,fadeinAnimation1,fadeinAnimation2,fadeinAnimation3,fadeinAnimation4,fadeinAnimation5);
setQuestion.start();
This is the method that checks if the animation has finished.
private void checkAnimation() {
while (true) {
// Check if animation has ended
if (setQuestion.isRunning() == false) {
assignListners();
break;
}
}
}
You can set an AnimatorListener on fadeinAnimation5.
This will give you an onAnimationEnd callback.
fadeinAnimation5.addListener(new AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
// ...
}
#Override
public void onAnimationRepeat(Animator animation) {
// ...
}
#Override
public void onAnimationEnd(Animator animation) {
// ...
}
#Override
public void onAnimationCancel(Animator animation) {
// ...
}
});
Or, as suggested by slott use an AnimatorListenerAdapter
fadeinAnimation5.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
// ...
}
}
I was having a similar problem and here is how I solved it:
private void crossFadeAnimation(final View fadeInTarget, final View fadeOutTarget, long duration){
AnimatorSet mAnimationSet = new AnimatorSet();
ObjectAnimator fadeOut = ObjectAnimator.ofFloat(fadeOutTarget, View.ALPHA, 1f, 0f);
fadeOut.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
fadeOutTarget.setVisibility(View.GONE);
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
fadeOut.setInterpolator(new LinearInterpolator());
ObjectAnimator fadeIn = ObjectAnimator.ofFloat(fadeInTarget, View.ALPHA, 0f, 1f);
fadeIn.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
fadeInTarget.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animator animation) {}
#Override
public void onAnimationCancel(Animator animation) {}
#Override
public void onAnimationRepeat(Animator animation) {}
});
fadeIn.setInterpolator(new LinearInterpolator());
mAnimationSet.setDuration(duration);
mAnimationSet.playTogether(fadeOut, fadeIn);
mAnimationSet.start();
}
You can actually set a listener to the AnimatorSet directly since AnimatorSet inherits from Animator. Here's some code:
import android.animation.Animator;
AnimatorSet setQuestion = new AnimatorSet();
setQuestion.playSequentially(fadeinAnimationQ,fadeinAnimation1,fadeinAnimation2,fadeinAnimation3,fadeinAnimation4,fadeinAnimation5);
setQuestion.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animator) {
}
#Override
public void onAnimationEnd(Animator animator) {
// !! turn on your onClickListener here !!
}
#Override
public void onAnimationCancel(Animator animator) {
}
#Override
public void onAnimationRepeat(Animator animator) {
}
});
setQuestion.start();