Showing both sides of a coin being flipped using Android standard animation

Question

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!

Answer 1

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.