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
Related
I wanted to make a basic animation on a TextView that would shrink when the user tapped it and then scaled back to the original size in order to provide visual feedback. Reading the docs, it seems that there are various ways to animate properties on Android, but I settled for using a view animation, defined in the following XML:
<set xmlns:android="http://schemas.android.com/apk/res/android" android:shareInterpolator="true" android:interpolator="#android:anim/accelerate_interpolator">
<scale
android:fromXScale="1.0"
android:toXScale="0.5"
android:fromYScale="1.0"
android:toYScale="0.5"
android:pivotX="50%"
android:pivotY="50%"
android:duration="100"/>
<scale
android:startOffset="100"
android:fromXScale="1.0"
android:toXScale="2.0"
android:fromYScale="1.0"
android:toYScale="2.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="50"/>
This works well enough, but it strikes me as odd that I have to calculate by how much I'm going to need to scale the second tag instead of being able to just use values relative to the original. Is there any way to use values relative to the original element (ie, using fromXscale="0.5" and toXscale="1.0") in the second tag?
If I get your question right try this
tv.animate().scaleXBy(2.0f).scaleYBy(2.0f).setDuration(100).setInterpolator(new LinearInterpolator()).start();
You can add reverse repeat policy or just add scale back animation.
hi i have 2 views that i want to have zig zag up and off the screen. ive tried using object animators like this
float 1
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/decelerate_interpolator"
android:ordering="sequentially" >
<objectAnimator
android:duration="6000"
android:propertyName="y"
android:repeatCount="0"
android:valueFrom="1500"
android:valueTo="-1000"
android:valueType="floatType" />
</set>
and float 2
<objectAnimator
android:duration="3000"
android:propertyName="x"
android:repeatCount="1"
android:repeatMode="reverse"
android:valueFrom="-250"
android:valueType="floatType"
android:valueTo="50" />
<set
android:duration="3000"
android:propertyName="x"
android:repeatCount="1"
android:repeatMode="reverse"
android:valueFrom="-250"
android:valueTo="50"
android:valueType="floatType" />
</set>
but the results are varied, ie works on tablets but not smaller screens,
I've changed the code to do this programmatically and all it does is slightly change the way I goes up the screen all I want is both balloons to go up the screen at the moment it works beautifully on my tablet but on smaller screens it only shows one balloon. Been struggling on this a while now all views are laid out in XML and are hidden until needed I found there was a way of using fractions in my from and to values but apparently its deprecated any suggestions for a total n00b like me?
Have you tried creating your own custom interpolator, it basically defines how your animation is going to behave with respect to time, for example accelerate interpolator when used with lets say translate animation, it will accelerate your view, so you might have to create a custom interpolator, that will define your zig zag path, along with translate animation. you can read from here :
Tutorial on Interpolators
In my Android app, I hava a scale animation.
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="#android:anim/accelerate_interpolator" android:fillEnabled="true" android:fillAfter="true" >
<scale android:fromXScale="1.0" android:toXScale="0.0" android:fromYScale="1.0" android:toYScale="1.0" android:duration="32000" />
</set>
it works fine. it scales the view from left to right. but I need to scale from right to left. so when I modify the fromXScale="-1.0", the animation does not happen and the view is scaled instantly without animation.
My animation xml for the reverse direction is given below:
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="#android:anim/accelerate_interpolator" android:fillEnabled="true" android:fillAfter="true" >
<scale android:fromXScale="-1.0" android:toXScale="0.0" android:fromYScale="1.0" android:toYScale="1.0" android:duration="32000" />
</set>
How can I animate the View from reverse direction? what is wrong with my code?
You should also add a android:fillBefore="true" in your animation.
The in the forward animation your view usually will have a scale of 1 which mean you don't need to set it at start. But in the reverse animation you start at default (ie 1) and animate to... 1
using Pivot solved the problem. Its a better practice to control direction of an animation through pivotX and pivotY.
I've had trouble finding good documentation about animations in Android, but I managed to get my animation working. What I'm concerned about the way I did it is efficiency/performance.
My goal was to have a cloud image move across the screen over and over and repeat forever. To do this I ended up putting 2 identical ImageViews positioned over each other and defining 2 animations:
cloud_slide_exit.xml:
<translate
android:fromYDelta="0"
android:toXDelta="-100%p"
android:duration="25000"
android:repeatCount="infinite"
android:repeatMode="restart"
/>
cloud_slide_enter.xml:
<translate
android:fromYDelta="0"
android:fromXDelta="100%p"
android:duration="25000"
android:repeatCount="infinite"
android:repeatMode="restart"
/>
I applied the first animation to "image1" and the second to "image2." The first animation moves "image1" from right (on-screen) to left (off-screen) while the second animation moves "image2" (which starts off screen) from right (off-screen) to left (on-screen). The end result when you view both animations is that the image moves across the screen. When it reaches the left end of the screen it will start coming from the right side of the screen. This is the only way I could think of doing this.
Is there a more efficient way to go about doing this animation? I'd like to find a more efficient way because I actually have 3 clouds moving which means that I have 6 ImageViews/TranslateAnimations.
replace your code by following code:
cloud_slide_exit.xml:
<translate
android:fromXDelta="100%p"
android:toXDelta="0%p"
android:duration="25000"
android:repeatCount="infinite"
android:repeatMode="restart"
/>
cloud_slide_enter.xml:
<translate
android:fromXDelta="100%p"
android:toXDelta="0%p"
android:duration="25000"
android:repeatCount="infinite"
android:repeatMode="restart"
/>
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.