Animations, when done properly, are a guaranteed way of increasing the visual appeal of an app. In my previous blog posts, we’ve seen how we can make simple animations in Blend, and later we’ve seen how we can combine these simple animations to make a card flip effect. So, contiuning on in this trend, I’ve set my eyes on the another such frequently used and nice-looking effect: Turning a page.
If you look at the card flip effect example, you can see that we can actually use it for turning a page by changing the center of rotation of the objects. However, this will result in stiff looking rectangle pages which lack the curvy edges of a real page. So, how can we turn that page more realistically?
Unfortunately, we can’t make it look as good as this. At least, not easily.
It is not possible to create an effect in Blend like shown in the screenshot. You can, however, create such an effect in code, using bezier curves and whatnot. But it looks quite complicated, and I’ve seen people suggesting to use Direct2D instead of creating such animations in code. Also, while searching, I’ve come across some code examples or custom user controls but they were generally for WPF (I’ve only found one custom control for WinRT, and it wasn’t free).
So our best bet would be animating curves in codebehind, or learning Direct2D. Unfortunately, ain’t nobody got time for that.
If you are muttering to yourself “But.. but, I just wanted to turn a simple page, nothing fancy!”, then you are at the right place. We can play around in Blend a little to make it “sort of” curvy and look just like shown in the video below:
In this article, we’ll create an example app which will have a book where the user can turn the pages with the animation shown above.
➤ Here I am, on the road again.. There I am, up on the stage..
