How to create a Flipping card animation in Windows phone app

In this blog post I will show you how to create a flip card animation in Windows phone app.

Flipping card animation is one of the most widely used effect. This effect not only looks good, but also can be used as a nice transition animation between several elements in your page. And it is really easy to implement. You would have seen this effect in many poker games.

 

To add this animation in your app you need to follow the certain steps given below

 

1. Create a new project Flipcardanimation.

 


 

2. Now create two Rectangles on the MainPage having the name frontrectangle and backrectangle.

The frontrectangle will be visible to us and backwardrectangle will be behind the frontrectangle and its visibility should be set to collapse.

Now set the certain properties of both of them like the planeprojection property and rendertransform property which we will use during storyboard animation.

Add the Tap event handler to both of rectangle controls as shown in the code below.

    To distinguish between both of them during animation set the fill property of both the rectangles with different colors. In this project we have set the fill property of frontrectangle to orangered and backrectangle to yellow.   3. Now add the following code given below in the LayoutRoot Grid of the MainPage.xaml.  


 

These lines of code consists of Storyboard animation which we will apply on both rectangles.

FlipCardFront animation will be invoked when we tap on front rectangle and FlipCardBack will be invoked when we will tap on backward rectangle.

 

4. So we add the following code in Tap event handles of both the rectangles to invoke the animation as shown below.


 

 

5. Now debug the project and run it on the emulator and observe the output. You will see a flipping animation as you tap on both the rectangles.

You can observe the four states of the animation in the pictures shown below.

 

State 1: Initial State

Before we tap on the front rectangle

 


 

State 2: Transition State

After we tap on the front rectangle.

 


 

State 3: Transition State

As the front rectangle flips backward rectangle will be shown.

 


 

State 4: Front animation completes

Back rectangle will be shown to you.

 


 

Similarly if we tap on backward rectangle that is the yellow color one the animation will go through the following four states as shown above.

 

Important points

The common mistakes that you could make during the implementation of following animation are

 

1. If you are using controls other than rectangle then don’t forget to set the Rendertransoform and Planeprojection property of them. For example if you are using grid instead of rectangle then set the Grid.Projection and Grid.RenderTransform property of it accordingly as shown in the above code.

 


 

2. If you are using controls other than rectangle having different names then you need to change the Targetname property of Storyboard animation accordingly.

In the below picture if you are using grid instead of rectangle having the name frontgrid you need to change the Targetname property in both storyboard animations to frontgrid.



 

3. Always remember to set the visibility mode of backward control to collapse initially.

 


 

I hope this post will be helpful to you. You can download the full project source file from the link given below.

Download full project file Flipcardanimation.zip