I have a test Image: Width: 136px and Height: 168px.
It's location on the screen is: x:102 and y:768.
I'm using Animation to rotate this Image:
Animation rotate_animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
rotate_animation.reset();
tile_1.startAnimation(rotate_animation);
The associated xml is rotate.xml:
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:toYScale="0.0"
android:pivotX="100%"
android:pivotY="100%"
android:duration="2000" />
It rotates, but completely off the screen, and ends up back where it started.
It appears to be rotating around x:0 and y:0.
I want to rotate it in place, around it's center.
I've played around with the numbers in the xml, but it always makes a giant circle.
Thanks for any help :)
Try removing the toYScale and setting the pivots to 50%. This way it should rotate from the center of the image
Use this code instead in rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000"
android:interpolator="#android:anim/cycle_interpolator"/>
</set>
Found a easy way to do a simple rotation.
My image is tile_1:
tile_1.animate().rotation(360);
HOWEVER, it will only work once unless you set up a Listener first, so full code for a quick 360 degree rotation with a reset to be able to do it again:
tile_1.animate().setListener(new Animator.AnimatorListener() {
#Override
public void onAnimationStart(Animator animation) {
}
#Override
public void onAnimationEnd(Animator animation) {
tile_1.setRotation(0);
}
#Override
public void onAnimationCancel(Animator animation) {
}
#Override
public void onAnimationRepeat(Animator animation) {
}
});
tile_1.animate().rotation(360);
// You must reset the rotation to 0. I found out that clearAnimation doesn't work here. When you go to rotate a second time, it does nothing because the Image is already rotated 360, even though it APPEARS to be reset; so you must set the rotation back to zero. Then it works perfectly. Hope this helps someone else :)
You can also add .setDuration here as well, so 'Last Line':
tile_1.animate().rotation(360).setDuration(1000);
One last thing: If you use this in conjunction with TranslateAnimation, and you set the duration on both to the same amount of time, it will move from point XY to point XY while completing 1 rotation. Very smooth looking. Thanks for input from all :)
Related
I've got a LinearLayout with a background bitmap. I'm adding 2-3 images to this layout with an animation. The problem is: everytime im adding images the FIRST image animation starts from the top left corner, for every other image directly after that animation it works just fine from the center. Im struggling for days to find a solution for this little annoying problem. Do u have any advise what could cause this?
Here my problem in a gif I made: http://imgur.com/FCPgof1
my animation:`
<scale
android:duration="750"
android:fillAfter="false"
android:fromXScale="0"
android:fromYScale="0.0"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.0"
android:toYScale="1.0" />
`
my layout:
<LinearLayout
android:id="#+id/layoutCompareUppoints"
android:layout_width="140dp"
android:layout_height="28dp"
android:background="#drawable/uppballsbgnew" >
</LinearLayout>
my code:
`private void animUppointsBefore() {
if (k < Integer.valueOf(uppoints)) {
Animation a = AnimationUtils.loadAnimation(this,
R.anim.debug_grow_fast_animation);
ImageView upp = new ImageView(this);
upp.setImageResource(R.drawable.uppballlightnew);
upp.setAdjustViewBounds(true);
uppLayout.addView(upp);
upp.startAnimation(a);
a.setAnimationListener(new AnimationListener() {
#Override
public void onAnimationStart(Animation a) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationRepeat(Animation a) {
// TODO Auto-generated method stub
}
#Override
public void onAnimationEnd(Animation a) {
// TODO Auto-generated method stub
k++;
animUppointsBefore();
}
});
}
}`
The issue you're most likely seeing is the image is getting added to the layout before any animation actually takes place. The image is going to start full size, shrink down to 0, then grow up to 1.
What you want to do is make it invisible before you add it then make it appear off screen. A couple of methods you can do, the usual way is to set the ImageView to View#INVISIBLE then with an Animation#AnimationListener, set the view to View#VISIBLE on animation start.
If you can, using Animators are way easier (There are some libraries in the support library that don't allow this). You can set the View's Alpha to 0 before adding it, then just set it to 1 instantly as part of the animation. Just make two ObjectAnimators, one for alpha and one for scale, then combine them in to a single AnimatorSet.
EDIT:
To put the final answer from comments to here.
Rather than adding the views just before animating, it may help to put the image views already laid out in the layout but invisible. That way, there doesn't need to be a new layout and measure pass that could be screwing up the measurements to the pivot point.
I try to make the game of spin the wheel in Android.
I find it hard to rotate the circle in the right way.
I'd love help how to rotate the circle and stop it so I get a different result each time.
At the moment it turns a defined amount of times and returns to the beginning.
If I stop in the middle of it by this msmallWheelBack.clearAnimation() it returns to the start of the round.
Thank you in advance for your help.
In my code:
Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate_around_center_point);
mframeWheelBig.startAnimation(animation);
The anim xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false" >
<rotate
android:duration="2500"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:toDegrees="360"
android:fromDegrees="0"
android:fillAfter="true"
android:fillBefore="true"
android:fillEnabled="true"/>
</set>
And like I said this is how I stop the animation
mframeWheelBig.clearAnimation();
You could programmatically set a random value for 'toDegrees'. I guess you can set more than 360 degrees too, to get more spins.
However, I didn't find a setter method for that value, so I guess you'll have to create the animation programmatically, using RotateAnimation, but still it should be quite easy to to.
This would rotate between 3 and 6 turns and could stop at any angle.
final static int MIN_TURNS = 3;
final static int MORE_TURNS = 3;
float toDegrees = 360 * MIN_TURNS + Math.random() * 360f * MORE_TURNS;
Animation anim = new RotateAnimation(0, toDegrees);
Hi guys i uses the code below to perform rotation but it only rotates one time and goes back to its original position, how to let the image stay at the rotated position?
<?xml version="1.0" encoding="utf-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="90"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000"
android:startOffset="0"
/>
xml file of my code
Animation rotation = AnimationUtils.loadAnimation(this, R.anim.rotate);
a.startAnimation(rotation);
use:
anim.setFillAfter(true);
If fillAfter is true, the transformation that this animation performed
will persist when it is finished. Defaults to false if not set. Note
that this applies to individual animations and when using an
AnimationSet to chain animations.
I am creating an application and I'm including an animation. It is a rotation to the right, and what I am looking for is that in the same way that rotates clockwise, rotate left and return to the starting point as a pendulum (all with the same speed), only one time.
This is the animation:
<?xml version="1.0" encoding="UTF-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromDegrees="0"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="50"
android:fillEnabled="true"
android:fillAfter="true"
/>
This animation begins when a previous animation ends:
AnimationListener animationInListener = new AnimationListener(){
#Override
public void onAnimationEnd(Animation animation) {
tv2.setText("GAME OVER");
count=count-count;
duracionAnim=2000;
tv1.startAnimation(animationRotateR);
tv1.startAnimation(animationRotateL);
}
I tried to make another animation with android: fromDegrees = "50" and android: toDegrees = "0", but not how to make it work one after the other.
I searched but did not find anything. Someone could help me?
I have 4 clickable images surounding the center of my screen. Upon clicking one of the images I want the image to slide from it's current position to the center of the screen.
Once the image reaches the center of the screen I would like the image to flip and then have my fragment load.
How do I obtain this full sequence? I have my fragment loading but I am unsure of how to create an animation that slides my image from it's current position to the center. The layout of the page is know and is as follows.
1 2 3
4 5 6
7 8 9
where 2, 4, 6, 8 are my images that I want to slide and 5 is the position that I want them to slide to on click (then flip and show my fragment).
Thanks,
Dman
EDIT :
One thing I cannot get to occur is the events to play in sequence. Currently when i click the image it waits the offset that I have set on the flip_image.xml animation and then plays them all at once in the duration given to the flip_image.xml animation. Any help on this would be much appreciated.
slide_left.xml
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%"
android:toXDelta="-112%"
android:duration="1000"/>
slide_alpha.xml
<?xml version="1.0" encoding="utf-8"?>
<alpha
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="0.8"
android:toAlpha="1.0"
android:duration="1000" />
flip_image.xml
<?xml version="1.0" encoding="utf-8"?>
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="0.0"
android:toXScale="1.0"
android:pivotX="50%"
android:fromYScale="1.0"
android:toYScale="1.0"
android:startOffset="1000"
android:duration="200" />
Calling Code:
private void loadFragmentAnimation(final ImageView view, final int slideDirection) {
AnimationSet animSet = new AnimationSet(true);
animSet.addAnimation(AnimationUtils.loadAnimation(getActivity(), slideDirection));
animSet.addAnimation(AnimationUtils.loadAnimation(getActivity(), R.anim.slide_alpha));
animSet.addAnimation(AnimationUtils.loadAnimation(getActivity(), R.anim.flip_image));
animSet.setAnimationListener(new AnimationListener() {
public void onAnimationStart(Animation animation) {
}
public void onAnimationRepeat(Animation animation) {
}
public void onAnimationEnd(Animation animation) {
// mCallBack.categorySelected(view.getId());
}
});
view.startAnimation(animSet);
}
Use View animation.
Create an AnimationSet having a TranslateAnimation
followed by a ScaleAnimation to simulate a flip (you may need
to mirror the image on the other side of the flip. Perhaps there's
an easier way?).
Then set the animation to the ImageView using
setAnimation().
I guess you should be able to specify the animation in XML too.
Edit:
For the flip animation, you may refer to the following links:
Android Animations 3D flip
Android Animation - Flip