Flip Animation in Xamarin Forms

Following is the article explaining how to achieve flip animation in xamarin forms. Here basically I will be implementing how to change the Frame Content which has 2 views Front & Back View and on the tap, the view will change with a flip animation.

Flip Animation in working

Approach

So to start with the view, We need a CustomCard view with 2 Bindable Properties

1. FrontView
2. BackView

CustomCard Code

CustomCard view is extended from ContentView so that we can add any view inside it & assign it’s Front & Back View which we will use later to flip. So let’s create our Front and Back views

FrontView code

BackView Code

We have added our FrontView & BackView in separate Components folder which is nothing but ContentView with Label, You can replace them with your custom view. So let’s bring it all together on our FlipTheCardPage which is a normal ContentPage.

FlipTheCardPage xaml code

On this page, we have added our CustomCard view & assigned it our Front & Back views which we created in the last step. Let’s go to the part where the actual magic is happening that is CardTappedEvent in code behind.

FlipTheCardPage code behind

By using the xamarin’s RotateYTo & RotationY we can achieve the flip animation, One thing to notice here is Rotate private field which I have used to achieve reverse flip by adding +180 or -180. If you don’t want reverse flip animation simply add +180 degree rotation each time the card is tapped.