So i got this Rotation Animation:
rotate = new RotateAnimation(0f, -270f,200,200);
rotate.setDuration(2000);
rotate.setFillAfter(true);
and i have Button that start the animation on click
public void click(View view){
Image.startAnimation(rotate);
}
and when i click on button animation starts correctly and ends on needed state. but when i click second time it begin from state it was before any animation.
Question:
how can i start animation from the state it ends?
Object Animator instead
ObjectAnimator imageViewObjectAnimator = ObjectAnimator.ofFloat(imageview ,
"rotation", 0f, -270f);
imageViewObjectAnimator.setDuration(2000);
imageViewObjectAnimator.start();
Related
I have implemented image rotate animation on the audio player screen where when audio start than image rotation and when a user clicks on pause button animation stop, I use clearAnimation() method for stopping animation and when user resume I call startAnimation() method but this Look bad because when I clear animation image degree like 90 was different and when I startAnimation() again its starting point was 0. please check this video where animation having an issue while play/pause audio Watch This Video.
So I find a pause()/resume() animation for better smoothness. Can anyone help me to sort out animation smoothness or working batter?
Use Animator object to animate the view's property (like android:rotation):
View imgView = findViewById(R.id.image);
View playPauseBtn = findViewById(R.id.button);
final ObjectAnimator anim = ObjectAnimator.ofFloat(imgView, View.ROTATION, 0f, 90f)
.setDuration(4000);
anim.setRepeatCount(Animation.INFINITE);
anim.setInterpolator(new LinearInterpolator());
anim.start();
playPauseBtn.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if (anim.isPaused()) {
anim.resume();
} else {
anim.pause();
}
}
});
I'd like to translate view with ObjectAnimator twice, but the "X" position gets back to starting position after pressing the button again, how can i make it continue, and move further right in this case?
final ObjectAnimator animation = ObjectAnimator.ofFloat(button, "translationX", 100f);
animation.setDuration(2000);
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
animation.start();
}
});
The reason your button jumps back to its starting position is covered in the documentation for the ofFloat() method:
A single value implies that that value is the one being animated to, in which case the start value will be derived from the property being animated and the target object when start() is called for the first time.
Because you're reusing the same ObjectAnimator instance every time, the translationX property is animated from its original (0) to the passed in argument (100) every time.
However, you can't just change it to create a new ObjectAnimator and have that solve everything. Let's say you changed your code to this:
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
final ObjectAnimator animation = ObjectAnimator.ofFloat(button, "translationX", 100f);
animation.setDuration(2000);
animation.start();
}
});
That would change what happens, but still not give you what you want. Now the button would slide from 0 to 100 the first time, but would remain stationary every time after that.
Why?
Because after the first animation, the translationX property is 100. So now you're animating between 100 and 100 (instead of 0 and 100)... which doesn't do anything.
The solution is to animate from the view's current translationX to the current value + 100. And to do that every time, instead of re-using the same ObjectAnimator over and over.
button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
float end = button.getTranslationX() + 100;
ObjectAnimator animation = ObjectAnimator.ofFloat(button, "translationX", end);
animation.setDuration(2000);
animation.start();
}
});
button.animate().translationX(button.translationX + 100f).setDuration(1000).start()
Works like a charm
On button click I would like to make an image move either down or right. The issue I am running into is that the movement of the image only occurs once. In onClick() method I am just calling either one of my move methods. Here are the move methods.
private void moveLeftToRight() {
animation = new TranslateAnimation(0.0f, 200.0f, 0.0f, 0.0f);
animation.setDuration(1500); // animation duration
animation.setFillAfter(true);
iv1.startAnimation(animation); // start animation
}
private void moveUpToDown() {
animation = new TranslateAnimation(0.0f, 0.0f, 0.0f, 200.0f);
animation.setDuration(1500); // animation duration
animation.setFillAfter(true);
iv1.startAnimation(animation); // start animation
}
I can call either one of these one time for the first time. Thereafter the animation methods do not work. I am wondering if I need to reset or something. Any ideas? Thanks in advance.
When you pass your coordinates to TranslateAnimation those coordinates are relative to 0,0 and not the views coordinates.
To fix this we will get the views coordinates with view.bottom, view.left etc.
Then add the values you'd like to transform by to those values, pass those to TranslateAnimation, and your translation will work as expected.
use Tween Animation code:
#Override
public void onClick(View v) {
RotateAnimation rotateAnimation = new RotateAnimation (0,90,Animation.RELATIVE_TO_SELF,0,Animation.RELATIVE_TO_SELF,0);
rotateAnimation.setDuration (2000);
rotateAnimation.setFillAfter (true);
image2.startAnimation (rotateAnimation);
}
of cause use Tween Animation can do that,but Tween Animation hava a defect.
For example the following gif click event does not move.
So I want use property Animation to do that,but I found property Animation can only rotate around the Center.
how can i use property Animation to rotate view around the point?
I think from your question that you want rotation around the mouse pointer.
Try this, I think it should work but I haven't had a chance to try it yet.
...
Animation rotateAnimation = new RotateAnimation(0.0f, 360.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.0f);
...
I am stuck in a condition that I can't keep the sub layout faded after using the fade animation
FrameLayout mapLayout = (FrameLayout)findViewById(R.id.mapLayout);
Animation fadeAnim = AnimationUtils.loadAnimation(this, android.R.anim.fade_out);
mapLayout.startAnimation(fadeAnim);
Please guide how can I achieve this in android. This animation and shaded effect occurs when I click the 'Pause' Button and to reverse the effect I will press the 'Resume' Button(Sorry I made the image with 'Pause' button in shaded view, in actual it is 'Resume')
Try
fadeAnim.fillAfter(true);
fadeAnim.execute();
http://developer.android.com/reference/android/view/animation/Animation.html#setFillAfter(boolean)
hii makki you can set the below code at your onclick event
AnimationSet set = new AnimationSet(true);
Animation animation = new AlphaAnimation(0.0f, 1.0f);
animation.setDuration(50);
set.addAnimation(animation);
animation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0.0f,Animation.RELATIVE_TO_SELF, 0.0f,
Animation.RELATIVE_TO_SELF, -1.0f,Animation.RELATIVE_TO_SELF, 0.0f
);
animation.setDuration(100);
set.addAnimation(animation);
LayoutAnimationController controller = new LayoutAnimationController(set, 0.5f);
l.setLayoutAnimation(controller);
then fade out animation
public static Animation runFadeOutAnimationOn(Activity ctx, View target) {
Animation animation = AnimationUtils.loadAnimation(ctx,android.R.anim.fade_out);
target.startAnimation(animation);
return animation;
}
Both above answers helped me in solving the issue, but both answers weren't the actual solution to my problem. The solution I made is
I defined two animations according to my need
Animation fadeOut = new AlphaAnimation(0f,0.5f);
Animation fadeIn = new AlphaAnimation(0.5f,1f);
fadeOut.setFillAfter(true);
fadeIn.setFillAfter(true);
When I clicked 'Pause' button I executed following line
mapLayout.startAnimation(fadeOut);
Then to resume from paused state, I executed following line
mapLayout.startAnimation(fadeIn);
Thanks Simon and Deepak!