In my last post, I talked about creating a simple transition to slide a page in or out. While that transition was functionality I needed for my app, Santa Calls, I thought it would be fun to do more of these posts. For this post we’ll create a turnstile transition. The turnstile transition is like a page turning.
For the turnstile transition, we need to use the animate the Projection of the page. We’ll set the Projection to be a PlaneProjection. To get the rotation to turn like a page would, we need to rotate around the vertical, or y-axis. The RotationY property of the PlaneProjection is how we accomplish this.
public static async Task TransitionInTurnstile(this FrameworkElement source)
{
await source.Turnstile(75, 0);
}
public static async Task TransitionOutTurnstile(this FrameworkElement source)
{
await source.Turnstile(0, -90);
}
private static async Task Turnstile(this FrameworkElement source, double from, double to)
{
if (source == null) return;
// make sure the projection pivots on the left side of the phone
source.Projection = new PlaneProjection { CenterOfRotationX = 0 };
var story = new Storyboard();
var animation = new DoubleAnimation { Duration = TimeSpan.FromSeconds(.35), To = to, From = from };
Storyboard.SetTargetProperty(animation, new PropertyPath("(UIElement.Projection).(PlaneProjection.RotationY)"));
Storyboard.SetTarget(animation, source);
story.Children.Add(animation);
await story.BeginAsync();
}
The code is very similar to the slide transition, and still very simple. Just as before, I am using Morten’s Storyboard as a Task extension method. Adding these animations to pages is the same as before. simply call the transition method on the object you want to animate.
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
try
{
await LayoutRoot.TransitionInTurnstile();
}
catch { }
}
Remember that we are performing an async operation within a void method, so wrap the call in a try/catch. This code shouldn’t error, but you never know.
When navigating backwards, first cancel the navigation, animate, and then navigate!
protected override async void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
{
e.Cancel = true;
base.OnBackKeyPress(e);
try
{
await LayoutRoot.TransitionOutTurnstile();
}
catch { }
NavigationService.GoBack();
}