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.
Approach
So to start with the view, We need a CustomCard view with 2 Bindable Properties
- FrontView
- 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.