I managed to have a relative layout with an image in the middle over a constraint layout - this image should be shown instead of a Toast-Message (fade in => fade out)
When the app starts - just to prove that it works - it shows that image from the XML settings (thumb up / visibility).
Now I want to use the following function to change the image:
public void showThumbs(Integer like){
if (like > 0){
overlayout.bringToFront();
overlay.setImageResource(R.drawable.like);
overlay.bringToFront();
overlay.animate().alpha(1.0f).setDuration(800);
overlay.animate().alpha(0.0f).setDuration(800);
}
if (like < 0){
overlayout.bringToFront();
overlay.setImageResource(R.drawable.dislike);
overlay.bringToFront();
overlay.animate().alpha(1.0f).setDuration(800);
overlay.animate().alpha(0.0f).setDuration(800);
}
}
I tried to work with visibility which did not work and now I tried the animation fader.
What happens is this:
At the beginning it shows the thumb up as set in the XML-layout itself - OK
When I set like to a negative value it changes the image and fades it out
When I set like to a positive value it uses the thumbs up and fades it out
But it only works fades the image the first time and only the fade out part.
As soon as it is gone I can call this function again an again and it will not show any picture anymore.
Any idea where my mistake is?
It should work like a Toast-Message (Fade in => Fade out).
First of all there should be else between if statements. So you should have if( ){ } else { } instead of if( ) { } if( ) { }
Secondly, this line makes your image invisible permanently:
overlay.animate().alpha(0.0f).setDuration(800);
To make it work you should "chain" you animations. First option is:
if (isLiked) {
overlay.setImageResource(R.drawable.like);
// overlay is invisible by default
overlay.animate()
.alpha(1.0f)
.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
overlay.animate().alpha(0.0f).setDuration(800);
}
}).setDuration(800);
} else {
//...
}
Another option is using AnimatorSet.
ObjectAnimator fadeOut = ObjectAnimator.ofFloat(overlay, "alpha", 1f, 0f);
fadeOut.setDuration(800);
ObjectAnimator fadeIn = ObjectAnimator.ofFloat(overlay, "alpha", 0f, 1f);
fadeIn.setDuration(800);
final AnimatorSet mAnimationSet = new AnimatorSet();
mAnimationSet.play(fadeOut).after(fadeIn);
mAnimationSet.start();
Related
I am trying to slide down a view on a button click and on the same button click slide upwards
Everything works on the first time once slide down and slide up is done the again it wont work
if (slideView.getVisibility() != View.VISIBLE) {
Transition transition = new Slide(Gravity.TOP);
transition.setDuration(300);
transition.addTarget(slideView);
TransitionManager.beginDelayedTransition(slideViewParent, transition);
slideView.setVisibility(View.VISIBLE);
transition.removeTarget(slideView);
} else {
slideView.animate()
.translationY(-slideView.getHeight())
.setDuration(400)
.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
animation.end();
slideView.setVisibility(View.GONE);
}
});
}
it will slide down initially from the parent view .. then on button click it will slide up.. the again on button click nothing happens.. I want to slide down it again
I have no enough reputation to comment.
But, if your view is already visible or even already gone then your error is at this two lines:
slideView.setVisibility(View.VISIBLE);
slideView.setVisibility(View.GONE);
The view is already visible or already gone and you are setting it to visible/gone again ending in an infinite loop of going down/up.
So, change your code to this:
if (slideView.getVisibility() != View.VISIBLE) {
Transition transition = new Slide(Gravity.TOP);
transition.setDuration(300);
transition.addTarget(slideView);
TransitionManager.beginDelayedTransition(slideViewParent, transition);
slideView.setVisibility(View.GONE);
transition.removeTarget(slideView);
} else {
slideView.animate()
.translationY(-slideView.getHeight())
.setDuration(400)
.setListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
animation.end();
slideView.setVisibility(View.VISIBLE);
}
});
}
Since you are animating the view depending on its visibility, i.e. (slideView.getVisibility() != View.VISIBLE), then it is not a good idea to set its visibility in this piece of code. You might want to animate it on a different boolean ( in my case if music is playing, slide up and visibility visible, else slide down and visibility gone). If there is another thing changing your view's visibility, then the following codes will work as is.
Inside the onClickListener:
if (slideView.getVisibility() != View.VISIBLE) {
// if the view is not visible, slide it up
slideView.animate()
.translationY( -slideView.getHeight() )
.setInterpolator( new LinearInterpolator() )
.setDuration( 500 )
.start();
} else {
// if the view is visible, slide it back where it was
// 0 indicates the original position the view was in
slideView.animate()
.translationY( 0 )
.setInterpolator( new LinearInterpolator() )
.setDuration( 500 )
.start();
}
Please keep in mind, this all depends on the visibility of the view itself and on how you do that!
You might need to tell us who , in your codes , changes the visibility of the view to give you a better if statement.
I am trying to learn a little bit about animations and so decided to get an ImageView to go across the screen from left to right, which I achieved with:
TranslateAnimation mAnimation = new TranslateAnimation(0, 180, 0, 0);
mAnimation.setDuration(1000);
mAnimation.setFillAfter(true);
mAnimation.setRepeatCount(-1);
mAnimation.setRepeatMode(Animation.REVERSE);
myImageView.setAnimation(mAnimation);
So, I decided to take on a new challenge. Once the image has gone from left to right, I wanted to try and get the image to return to the start position by arching back from right to left to its starting position (basically, a complete semi-circle). However, once the image has reached the end of the x-axis at position 180, I get stuck.
After reading about different methods for animation, I opted to try out ValueAnimator:
ValueAnimator animator = ValueAnimator.ofFloat(0, 1); // values from 0 to 1
animator.setDuration(1000); // 1 seconds duration from start to end position
animator.setRepeatCount(-1);
animator.setRepeatMode(ValueAnimator.REVERSE);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
{
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (Float) (animation.getAnimatedValue());
myImageView.setTranslationX((float)(180.0 * Math.sin(value*Math.PI)));
myImageView.setTranslationY((float)(80.0 * Math.cos(value*Math.PI)));
}
});
animator.addListener(new AnimatorListenerAdapter()
{
#Override
public void onAnimationEnd(Animator animation)
{
// done
}
});
animator.start();
However, I am unable to get the positioning correct. I do have a semi-circle (good), however, it is moving the image like a backward C rather than a straight line left to right and then arching back to its starting position (bad).
I am not sure if I should be using AnimatorSet to link the left to right movement and the arching back movement together to create one whole animation...
Can anyone give me some guidance on how to achieve what I have described?
I'm animating a view and I want to reset the view to the original position after animation ended.
This is what I have:
rl2 is a relativeLayout
rl2.animate().translationX(-60).translationY(117).setDuration(2000);
I tried setting this but its not working:
rl2.clearAnimation();
clearAnimation(); does not reset your animations, it just stops them and removes them from the animation queue. To undo your animations you need to actually undo them. So, for your code block you will need to call rl2.animate().translationX(0).translationY(0).setDuration(2000); to move the view back to its original position.
As #Chris Stillwell mentioned on his answer, But you can move View back to it's original position after translation animation by
rl2.animate().translationX(0).translationY(0);
I know this question was asked long time ago but someone may still look for answer.
I use the Animation class for this kind of thing; there is a setFillAfter method in this class, so you can set if you want the animation to apply its transformation after it ends.
Animation anim = new ScaleAnimation(
1f, 1f, // Start and end values for the X axis scaling
1f, 2f, // Start and end values for the Y axis scaling
Animation.RELATIVE_TO_SELF, 0f, // Pivot point of X scaling
Animation.RELATIVE_TO_SELF, 1f); // Pivot point of Y scaling
anim.setFillAfter(false); // no needed to keep the result of the animation
anim.setDuration(1000);
anim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
#Override
public void onAnimationRepeat(Animation animation) {
}
});
gangsterImage.startAnimation(anim);
If you're going to remove view don't use animation.removeAllListeners(), the function cannot continue that's why you will see some error. If you want to disappear a view, use View.GONE
in Kotlin like this:
animation.doOnEnd {
binding.mainLayout.visibility = View.GONE}
But by this way you couldn't remove any animation! So it' better rest them to the initial position.
binding.tvM2.animate().translationX(0f).translationY(0f).rotation(0f)
just use anim.setFillAfter(false); to reset automatically after animation ends.
I am developing a basic app for detecting all the Gestures like (Single tap, Double Tap, Swipe, Shake). I also have implemented for wait. i,e until the animation is completed.
I am using Horizontal progress bar as timer using the ObjectAnimator.
For that i am displaying text like Single tap, and if any action other than this is done it is error.
So for the first time when WAIT text is displayed if I do not perform any action the onAnimationEnd is getting called.
Below is my code.
objectAnimator = ObjectAnimator.ofInt(timerProgress, "progress", 0, 100);
objectAnimator.setDuration(progressTime);
objectAnimator.setInterpolator(new AccelerateInterpolator());
objectAnimator.setEvaluator(new IntEvaluator());
objectAnimator.addListener(new AnimatorListenerAdapter() {
#Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
if (timerProgress.getProgress() != 100) {
return;
}
if (!isTouched) {
onTouch(Constants.WAIT);
}
}
});
If i set any text after WAIT, (say Double tap ) and if I do not perform anything, the onAnimationEnd must be called. But it is not geting called.
I have used view.clearAnimation() but didnt work.
Is there any work around.? Please help
I have an Activity with a toolbar (which is part of the SharedElements Activity entering animation) and below that toolbar are three ImageViews horizontally next to each other. In their XML implementation all three are set INVISIBLE.
What I'm trying to do is, to animate them sequentially "dropping" from behind the toolbar. My implemenation is this:
int delay = 500;
for (int y = 0; y < 3; y++) {
ObjectAnimator oa = ObjectAnimator.ofFloat(imageViews[y],
"translationY", -300, 0);
oa.setDuration(600);
oa.setStartDelay(delay);
oa.start();
imageViews[y].setVisibility(View.VISIBLE);
delay = delay+100;
}
}
As you can see, I'm iterating through the three ImageViews and start a animation for each one to go from a -300 X-position (which is behind the toolbar) to their normal position.
This animation works great - just as I want it to be, but the problem is, that right before all ImageViews are briefly flickering which I can't explain. I tried debugging, but while I'm going through the lines of that part my screen stays black. So I can't determine where/why the Views become visible.
Maybe you can help me to find my mistake.
Thank you, this is my working Code:
For all three ImageViews:
ObjectAnimator anim1Pin = ObjectAnimator.ofFloat(img_pinned, "translationY", -300, 0);
anim1Pin.setDuration(ANIMATON_DURATION);
anim1Pin.setStartDelay(300);
anim1Pin.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
img_pinned.setVisibility(View.VISIBLE);
}
#Override
public void onAnimationEnd(Animator animation) {
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
And the AnimatorSet:
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playTogether(anim1Pin, anim2Alarm, anim3LED);
animatorSet.start();
Few things, first, the problem may be as simple as setting the visiblity state to GONE and then after animation starts, setting it to visible. However, I would also use AnimatorSet to play the animations together and add the delay rather than do it in a loop.
If you use AnimatorSet there is an onAnimationStart method in AnimationListener that you can use the set the visible to VISIBLE rather than do it how you have to ensure that they become visible at the right time.