A ‘Paper’ like “2-Page” Close Animation

If you follow me on Twitter you’ll know that I love the iPad app ‘Paper’ . And what’s crazy cool about this app is that it was built by ex-Microsoft people that were working on the Courier project

The company is called “53”, and the app can be found in iTunes here .

This app has some really awesomely executed animations and it’s these that I want to try to reproduce in a Metro app.

I’ll try to keep the animations as simple as possible BUT I expect that in the end I may need to resort to DirectX 3D. Also I plan on taking several posts to complete this, as I will be experimenting with a lot of techniques..

Here’s a video of the animations that I hope to reproduce over the course of several posts..

 

“2 pages” to “Closed” view

So this first post will be an attempt to emulate the “2 pages” view to “closed” view. Please excuse the poorly drawn sketch …

Right Page

A simple rectangle half the width of the screen aligned to the right. I gave it an off white fill color just so that it can be distinguished from the left side.

Left Page

A simple rectangle half the width of the screen aligned to the left

 

Slider to emulate 2 finger gesture

Because I wanted to make this as simple as possible I am not going to try to get the 2 finger gesture working right now, in it’s place I’ll have a slider that does pretty much what the 2 finger pinch does .

For the slider I will have it slide 1 to 100 in steps of 1.

The reason we can use a slider to emulate the pinch, is because all we are concerned about with the pinch gesture is the distance between the 2 fingers (index and thumb) over time. So a slider ‘value’ over a min (0) and max (100) will suffice!

 

Animation to “Close” the 2 pages like a book

This is the fun bit, we need to animate the 2 pages in a way that looks like a book closing. I can think of several ways to do this BUT for now the simplest is to use a couple of “Transforms” to fake this 3D effect.

I created a storyboard called “sbClosePages” and arbitrarily am going to animate the page close over 2 seconds. It doesn’t matter how long you choose because in the end it will be the slider, or rather the pinch gesture, that will determine the duration of the close.

Lets start with the RIGHT PAGE :

What you’ll notice is that to get a nice page close effect you can use a combination of RenderTransform (scale, translate) and Projection (RotationY). I achieved this by simply trial and error in blend, sliding figures around to achieve the desired interaction.

The LEFT PAGE is exactly the same BUT the values for the transforms may be opposite as the pages are moving in opposite directions. It really is all about trial and error and visually experiencing the interaction. Blend is awesome for things like this, trying to do this in code or via numbers (no visual) would be very very difficult!

I’m not going to include every snapshot of the left page BUT if you want just look at the demo code to see the actual figures and screens.

What you’ll notice is that for the left page I needed to set the projections ‘CenterOfOrigin’ to achieve my desired effect, this again was a trial and error thing that would be near impossible to do if it wasn’t visual. Blend makes some things so simple that would normally be virtually impossible!

And the reason I needed to set the CenterOfOrigin is because I needed the right side of the ‘LeftPage’ to be the one that stays stationary during the animation.

Hooking up the slider to the storyboard

The last step is to run the storyboard in response to a gesture, in our case it is a slider that mimics a pinch.

First step is to wire up the sliders ValueChanged event.

Basically as we slide we want to set the storyboard to something between 0 and 2 seconds. Remember that the 2 seconds is the duration of the animation we defined above. The slider can move between 0 and 100, so if it moves to 50% then we want the storyboard to move 50% as well, which is 50% of 2 seconds = 1 second.

So the last step is to set the storyboard to the calculated value, and to do that we can use a very cool property on a storyboard called “Seek” . How seek works is it expects the storyboard to already be running, and when we set the seek it will go to that point in the storyboard

So lets kick start the storyboard on the init of the page, note that if we let it run it will just execute the storyboard so we should also pause it immediately!

So now when the slider changes we can “Seek” a particular time on the storyboard

And so when you run the app and slide the slider this is what you get

 

Sample Code

 

 

Conclusion

 

I plan on creating a bunch of posts to replicate a lot of the ‘Paper’ app animations so stay tuned for those. But as you can see it is easy to achieve some of those effects with simple transforms BUT done visually.

Catch you guys around!