I'm trying to implement a circular reveal animation which consist to reveal the view according the user finger when he's touching the view.
First, my view is inside an infinite circular reveal loop to keep the rounded aspect as long as the user do nothing.
Then when the user touch the view and start to swipe I calculated a factor inside the ACTION_MOVE to increase the radius in real time and call the circular reveal at each pass.
public void reveal(final View view,
final float centerX,
final float centerY,
final float startRadius,
final float endRadius,
final int duration) {
anim = ViewAnimationUtils.createCircularReveal(view, (int)centerX, (int)centerY, (int)startRadius, (int)endRadius);
anim.setDuration(duration);
anim.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
if (isRepeating) {
reveal(view,centerX,centerY,startRadius,endRadius,duration);
}
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
anim.start();
}
I recall the circular reveal method again inside its Listener to create the loop and the most important to avoid visual distortion.
I have noticed that if I didn't do this way some very fast distortion showed up because the animation duration is faster than each pass in ACTION_MOVE so the anim have time to finish before the next pass.
The distortion is the representation of the missing part of the view when the animation is finished and came back very fast to the current radius set with the Touch like a flash.
So this way with the method recall inside the Listener is working great until there.
Problem : On one of my devices there are senseless distortion in all directions while swiping.
According to my logs it's not a radius distortion because the start and end radius is always the same after each pass so the radius should not be moving like this especially when the finger is stopped, and the animation never stop thanks to the Listener like I explained above.
What am I doing wrong ?
I searched a lot and didn't find the same problem so I tried other ways like drawing canvas but unfortunately it doesn't match with my needs.
Is there another way to achieve this kind of animation even completely differently ?
Any lead is appreciate thanks in advance
EDIT : inside the ACTION_MOVE
scaleRadius = (float) (2 * distance / maxWidth + startScale);
if (scaleRadius < 1) {
scaleRadius = 1;
}
animator.reveal(this, middleCircleX, middleCircleY,
initialCircleRadius*scaleRadius, initialCircleRadius*scaleRadius, 0);
Logs : Always the same factor then the radius should not move because my finger is stopped
2020-03-27 15:42:56.113 onTouch: scaleRadius 1.7870371
2020-03-27 15:42:56.113 onTouch: scaleRadius 1.7870373
2020-03-27 15:42:56.227 onTouch: scaleRadius 1.7870371
2020-03-27 15:42:56.227 onTouch: scaleRadius 1.7870373
2020-03-27 15:42:56.331 onTouch: scaleRadius 1.7870374
2020-03-27 15:42:56.331 onTouch: scaleRadius 1.7870371
I am assuming that you dont want the flickering animation but rather that the radius of your circe transitions smoothly and becomes either bigger or smaller as a function of how far you swipe on the screen. (please correct me if this assumption is wrong)
I will assume that centerX and centerY are always the same value and are basically global variables.
Create a couple of additional global variables:
boolean animIsCurrentlyPlaying=false;
float mCurrentRadius=initialCircleSize; //i guess this is 1 in your case
float mTargetRadius;
Now on the ACTION_MOVE event you will do the following:
1- set mTargetRadius to be some function of the distance between centerX and centerY and the position of the finger on the screen (euclidean distance might be a good pick here is an example);
mTargetRadius=Float.valueOf(Math.sqrt((double)(Math.pow(event.getX()-centerX,2)+Math.pow(event.getY()-centerY,2))));
2- excecute the following method revealModified(view, 100);
public void revealModified(final View view,
final int duration) {
if(!animIsCurrentlyPlaying){
//here i just reference the global vars
anim = ViewAnimationUtils.createCircularReveal(view, centerX, centerY, mCurrentRadius, mTargetRadius);
mCurrentRadius=mTargetRadius;
anim.setDuration(duration);
anim.addListener(new Animator.AnimatorListener() {
#Override
public void onAnimationEnd(Animator animation) {
animIsCurrentlyPlaying=false;
if(mCurrentRadius!=mTargetRadius){
revealModified(view, 100);
}
}
});
animIsCurrentlyPlaying=true;
anim.start();
}
}
the method will be excecuted every time you move your finger ever so slightly. I set the duration to 100 ms but that can be shorter if you find its not reactive enough. anytime you move your finger a flag is set so no other animations can be started on top and the transition is always smooth.if you move your finger while an anim is playing then revealModified will be reexecured in the if statement within onAnimationEnd.
let me know if it works and especially if this is what you wanted
Related
I am developing two different animations as shown below.
The first animation I was able to develop using Object animator and FrameLayout. Basically, I created the two rectangles and the candlesticks inside a gravity-centered frame layout. When made to start the animation, I used the object animator to move them on either side and return to the initial position.
My second animation is the issue point here. In this animation, the rectangles will go on a circular path from their initial point and return back to their initial point. During this course, the candles need to move in sync with the rectangle giving a spring effect (or) kind of a sliced rectangle.
My initial idea was to re-use the first animation and just as the first animation runs, I would run a rotate animation on the frameLayout view.
But that doesn't seem to work wherein rotation works but the translation doesn't.
Can someone say if I have taken the right approach or should I use some other way to achieve this?
Adding the code that I have tried, but didn't work.
Animation anim = new RotateAnimation(0.0f, 360.0f, pivotX, pivotY);
anim.setDuration(500);
anim.setAnimationListener(new Animation.AnimationListener() {
#Override
public void onAnimationStart(Animation animation) {
for(View view : mCandleSticks) {
ObjectAnimator anim1 = ObjectAnimator.ofFloat(view, "translationX", view.getX(), targetPos, view.getX());
anim1.setDuration(500);//set duration
anim1.start();//start animation
}
}
#Override
public void onAnimationRepeat(Animation animation) {
}
#Override
public void onAnimationEnd(Animation animation) {
}
});
frameLayout.startAnimation(anim);
Thanks in advance.
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 have a View that has an OnClickListener. When clicked, the view translates up to a certain position on the page. This is no problem, the view goes where it should. When the view is clicked again, I would like to position it somewhere else, but this is not the case. After a little bit of trouble shooting, I found that my View's getTop() method returns the same value - even after the translation animation has moved the view to a different part of the screen. For the second animation, it is not using the current position (as I would expect), it instead uses the initial position.
Few things that I am doing: I am using the ObjectAnimation class rather than the TranslationAnimation class, since I wanted to keep the OnClickListener functioning. With the TranslationAnimation class, I found that the view was correctly moved, but the OnClickListener was only working in the area that the View started from. Using the ObjectAnimation class, I was able to easily get the translation to work AND the OnClickListener functions correctly - it is triggered where the view currently is on the screen.
Here's what I have so far:
final LinearLayout child = layouts.get(i); //ArrayList containing some dynamic layouts
final int offset = target - child.getTop();
ObjectAnimator anim = ObjectAnimator.ofFloat(child,"translationY",offset);
anim.setDuration(250);
anim.start();
This is what happens when the view is clicked the first time. It translates up along the Y axis, where the offset determines how far the View needs to move from its current position.
Now, here's what happens on the second click. The goal here was to align the view with the parent's base.
target = parent.getBottom();
offset = target - child.getTop();
anim = ObjectAnimator.ofFloat(child, "translationY",offset);
anim.setDuration(250);
anim.start();
prev = child;
This is where things fall apart - child.getTop() returns the Y coordinate of the view's ORIGINAL position. Not the current position. So after the animation, the view is placed well below the bottom of the parent. I read a different question which stated that I should use child.getY() instead, which is supposed to give me the translationY position plus the top position, but this didn't lead to any better results. I can't seem to get this to work just right. I'd simply like to move the view from its current position to the bottom of the screen, but this appears to be a hard thing to accomplish. Any help would be appreciated.
EDIT
I have added an animation listener:
ObjectAnimator anim = ObjectAnimator.ofFloat(child,"translationY",offset);
anim.setDuration(250);
anim.addListener(new ObjectAnimator.AnimatorListener(){
#Override
public void onAnimationStart(Animator animation) {
System.out.println("start: " + child.getTop() + " " + child.getY());
}
#Override
public void onAnimationEnd(Animator animation) {
System.out.println("end: " + child.getTop() + " " + child.getY() + " " + child.getTranslationY());
child.setTop((int)child.getY());
System.out.println(child.getTop());
}
#Override
public void onAnimationCancel(Animator animation) {}
#Override
public void onAnimationRepeat(Animator animation) {}
});
anim.start();
Here I am setting the listener to try to change where the Top of the view is located. Behaviour is again not working as expected. The view is actually sent up above the screen when I do this. Output of the System.out looks like this:
start: 2008 2008.0
end: 2008 478.0 -1530.0
478
So calling child.getTop() after the animation is complete and setting a new position returns a positive integer, but the view is not actually completely on screen. It is above the screen, partly visible. The height of the view itself is about 700px. I am still so confused as to why this is such a hard thing to accomplish.
EDIT 2
I have also tried setting layoutparams inside the onAnimationEnd method:
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)child.getLayoutParams();
params.removeRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
params.addRule(RelativeLayout.ALIGN_PARENT_TOP, RelativeLayout.TRUE);
params.topMargin = (int)child.getY();
child.setLayoutParams(params);
Result: child.getTop() still returns the original position of 2008.
You can get the very bottom of the screen coordinates like this :
float bottomOfScreen = getResources().getDisplayMetrics().heightPixels;
but you probably want it minus the height of your LinearLayout or else your LinearLayout will be cut off by the bottom :
float bottomOfScreen = getResources().getDisplayMetrics().heightPixels
- child.getHeight();
// if you want a little more space to the bottom
// try something like - child.getHeight()*2;
Then use ViewPropertyAnimator to animate your LL like this :
child.animate()
.translationY(bottomOfScreen)
.setInterpolator(new AccelerateDecelerateInterpolator())
.setDuration(250);
The Interpolator is just to make the animation more realistic.
In the case that child.getHeight() returns 0 , your Linear Layout has not been finished setting up by the system, in that case you might want to do something like :
child.post(new Runnable() {
#Override
public void run() {
float bottomOfScreen = getResources().getDisplayMetrics().heightPixels
- child.getHeight()*2;
child.animate()
.translationY(bottomOfScreen)
.setInterpolator(new AccelerateDecelerateInterpolator())
.setDuration(250);
}
});
Remember that a duration of 250 milliseconds is very fast, and does usually not look cool translating stuff on the screen, so you might want to set it a little higher, but thats just a matter of taste.
So I'm using a ValueAnimator to animate a stick figure's limbs from one position to another, in an infinite loop, or at least until the animation is stopped. My problem is that when the animator repeats I have a slight pause as if the animation is lagging behind, but it only happens when the animation repeats. I have other animations that only happen once and those run perfectly smoothly, and they have just as much computation each time so I'm currently thinking that it's a problem with the ValueAnimator.
In the past I was able to find other people complaining about this problem, but I haven't been able to find anyone who has found a solution. Do you guys know if this is a real problem with the Android ValueAnimator? If so, do you know of any solutions? If not, do you guys have any ideas as to why this could be happening to me in just that one place in the animation? I'm really stuck on this one.
My code for the ValueAnimator setup is this:
mFigureAnimator = ValueAnimator.ofFloat(0f, 1f);
mFigureAnimator.setInterpolator(new LinearInterpolator());
mFigureAnimator.setDuration(1000);
mFigureAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
public void onAnimationUpdate(ValueAnimator animation) {
Float delta = (Float)animation.getAnimatedValue();
// Set the drawn locations based on the animated time and the start/end
invalidate();
}
});
mFigureAnimator.setRepeatCount(ValueAnimator.INFINITE);
mFigureAnimator.setRepeatMode(ValueAnimator.RESTART);
mFigureAnimator.start();
for Animation, you can configure the interpolator as LinearInterpolator in the animation file :
android:interpolator="#android:anim/linear_interpolator"
for Animator, LinearInterpolator also work for me, I had a rotate animator, do 360 degrees rotation and repeat infinite:
public class RotateAnimator {
private float mDegrees;
private ObjectAnimator mAnim;
private RotateAnimator() {
mAnim = ObjectAnimator.ofFloat(this, "degrees", 360);
mAnim.setInterpolator(new LinearInterpolator());
mAnim.setRepeatCount(ValueAnimator.INFINITE);
mAnim.setRepeatMode(ValueAnimator.INFINITE);
mAnim.setEvaluator(new FloatEvaluator());
mAnim.setDuration(2000);
mAnim.start();
}
public float getDegrees() {
return mDegrees;
}
public void setDegrees(float degrees) {
this.mDegrees = degrees;
// invalidate the view so it can redraw itself
invalidate();
}
}
that way solved my problem, if you couldn't find another solution, hope this can help you, good luck.