I require an animation for an image in my application.
The image should start coming from the top left corner till the middle of screen. The image size will be smaller at the initial stage. While coming to the middle of the screen, its size should increase(i.e. scaling should take place). Image should not go back to its original position. It should be placed at the middle of the screen itself after the animation.
Can anyone please help.
Please find the answer here.
Create an xml inside /res/anim folder and put the below code into it.
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<scale android:fromXScale="0.0" android:fromYScale="0.0"
android:toXScale="1.0" android:toYScale="1.0"
android:duration="700" android:fillBefore="false" />
<translate android:fromXDelta="-200" android:fromYDelta="-200"
android:duration="700" />
</set>
Place the below code inside the java file:
Animation logoMoveAnimation = AnimationUtils.loadAnimation(this, R.anim.logoanimation);
logoIV.startAnimation(logoMoveAnimation);
logoanimation is the name of my animation xml file.
Thanks for all those who tried out for my question.
Related
I'm trying to make an image view to grow and reduce only on the x axis, yes, I want to deformate it.
It is actually the shadow of a bouncing ball. I'm trying to achive it with the scale animation, but it translate. Anyone that can help?
Here's the code of the animation that I'm using.
shadow.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_decelerate_interpolator" >
<scale
android:duration="10000"
android:fromXScale="1.1"
android:fromYScale="1.0"
android:toXScale="0.1"
android:toYScale="1.0" />
<alpha
android:duration="10000"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
</set>
I tested your code out and here is what i found:
The code that you have provided initially scales the object in X axis to 1.1 directly(i.e without any animation).
Next, the object is scaled down in X axis to 0.1 while the alpha goes down. The scaling takes place about the upper left corner of the object(i.e the pivot is set to default).
If you want the scaling to happen about any other point,you can specify that as
android:pivotX="x%"
android:pivotY="y%"
i am developing app, in which i want am image to move along a curve path in the background screen.i am able to move the image from one point to another using the below translate xml, but its moving along a straight path, i want it to move along a curve path.how can i achieve this?
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="3000"
android:fromXDelta="-20%"
android:fromYDelta="-10%"
android:toXDelta="150%"
android:toYDelta="-130%"
android:zAdjustment="normal" />
please help.thanks!
<rotate
android:toDegrees="360"
android:pivotX="100%"
android:pivotY="200%"
android:duration="6000"
android:repeatMode="restart"
android:repeatCount="infinite"/>
Workaround: I used rotate and played with pivotX and pivotY and image position
I have a transition from one activity to another that I am using in overridePendingTransition. Unfortunately all overridePendingTransition uses is the resource id of the file, so I am having trouble about how to edit this file so my transitions are proper.
Basically what I need to do is make changes to the R.anim.flip_in_scale_in so that I can change the value of the transitions fromX/toX so that it is set based on the user's screen size.
overridePendingTransition(R.anim.flip_in_scale_in, R.anim.stationary_item);
How do I update the R.anim.flip_in_scale_in file before use in the overridePendingTransition?
There isn't a way you can alter the animation from the resource file in the way you want.
However, you CAN create the animation to use percentages rather than dp values. When the animation is applied to the Activity's View, it will animate entirely on the view's size (which in most cases is the screen size).
This for example:
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="100%"
android:toXDelta="0%"
android:duration="500"
/>
</set>
Will slide in the view from the right side to the screen within half-a-second.
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0"
android:toXScale="1.4"
android:fromYScale="1.0"
android:toYScale="1.4"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000" />
</set>
This will increase the view to 40% it's current size over the span of one second. The pivot will be directly in the middle of the view regardless of the view's size.
I'm very close to getting a "coin flipping" animation to work, but due to the limitations (bugs?) in the current Animation system - I cannot find a way to show BOTH sides of a coin flipping in the air.
For example, I have the following Animation .XML:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:shareInterpolator="false">
<scale
android:repeatCount="17"
android:repeatMode="reverse"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0" android:toXScale="1.0"
android:fromYScale="1.0" android:toYScale="0.0"
android:pivotX="50%" android:pivotY="50%"
android:fillEnabled="true"
android:fillAfter="true"
android:duration="60"
/>
<scale
android:repeatCount="1"
android:repeatMode="reverse"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXScale="1.0" android:toXScale="2.0"
android:fromYScale="1.0" android:toYScale="2.0"
android:pivotX="50%" android:pivotY="50%"
android:fillEnabled="true"
android:fillAfter="true"
android:duration="800"
/>
<translate
android:repeatCount="1"
android:repeatMode="reverse"
android:interpolator="#android:anim/accelerate_decelerate_interpolator"
android:fromXDelta="0%"
android:toXDelta="0%"
android:fromYDelta="0%"
android:toYDelta="-150%"
android:fillEnabled="true"
android:fillAfter="true"
android:duration="800"
/>
</set>
This "fakes" a flipping animation by scaling the coin on the Y-axis and reversing it on a loop. In combination to this, there's a scale to make the overall animation bigger, while also translating it up and down. But it is only ever gonna show the one side of the coin.
I tried having two of these animations, each side of the coin, running at the same time, but I cannot find a way to stagger them due to the REPEATCOUNT not working when applied to an AnimationSet. Otherwise I could introduce some kind of delay after one anim (and before the other one) so they alternate, giving the illusion of a coin flipping.
Does anyone know any way I can tweak this to get the desired result?
I had thought of giving up and doing a frame-based anim (pre-render the flip as frames), but it appears you can't mix Frame & Tween anims, so I'd lose the flip "height" and "distance" effects.
(I have another issue when it comes to the coin landing - e.g. the final result is random, but I'm hoping I can switch in the actual result at the end?)
Thanks in advance!
I recently wanted to implement something like this for a project. I finally came up with a solution and the result was good enough. Hope it helps someone else who is trying to achieve the same animation.
I uploaded the result as a gist on GitHub.
For a preview of the animation click here.
For the full android studio project visit our CoinToss repository.
I was looking for something like this myself, even with the scaling of the image so it appears the imageview is getting closer to the screen.
I combined your animation with this solution to do exactly what you wanted and its fairly lightweight, missing out the need for multiple views.
https://github.com/Lojko/Booty/blob/master/src/game/booty/BootyGameActivity.java
Changed Location of the Original Link: http://www.jasoncavett.com/2011/05/changing-images-during-an-android-animation/#comments
See the FlipCoin class and how its used, I have an animation already existing (created in the same way as detailed by the link)
This code shows the same procedure
http://www.inter-fuser.com/2009/08/android-animations-3d-flip.html
I have a gridview, and I am trying to achieve a fly in effect on the images within it. This would be very similar to the effect seen when you load up gallery 3D and your image folders "drop in".
I have googled around the subject, and think I need to use a ViewAnimator and generate the animation through that: http://developer.android.com/reference/android/widget/ViewAnimator.html#setInAnimation(android.view.animation.Animation)
However, I am not sure and any help on how to achieve this whatsoever would be very welcome!
Regards
Mark
Do you want the fly-in animation per grid, or for the entire view?
For the entire view, use this:
Animation anim = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.flyin);
findViewById(R.id.YourViewId).setAnimation(anim);
anim.start();
Then specify your animation in a file flyin.xml like this:
<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="true">
<scale android:interpolator="#android:anim/decelerate_interpolator"
android:fromXScale="1.0" android:toXScale="0.0"
android:fromYScale="1.0" android:toYScale="0.0"
android:pivotX="50%" android:pivotY="50%"
android:fillAfter="false" android:duration="250"/>
</set>
Put that file in your res/anim-directory.