My page transitions look awkward - how do I animate pages for pages?

Question

I have an application with several pages. When I navigate between pages (using the NavigationService), I have an animation that causes text to crash - think about standard WP or Zune Client animations.

The animations themselves look reasonable, but the problem is that there is a gap between completing the animation and loading a new page. There seems to be a slight delay when all the elements complete the crash and when a new page is displayed.

This makes my page transitions a bit awkward.

How can I make a landing page at the moment the transitions are completed to avoid this?

fwiw - I just use the navigation service to navigate between pages.

this.NavigationService.Navigate(new Uri("/SomePage.xaml", UriKind.Relative)); 

Answer 1

I recently tried to solve the same problem in one of my applications. My solution included two main parts:

• Moving a large piece of work from the time you navigate the page until the application starts.
• Hiding inevitable work that could not be transferred to the application launch time, using smoke and mirrors in my page transition animations.

Moving work from the time the page goes to the time the application starts

In my application, I have a main page containing a long list of elements, and then a details page containing a lot of detailed information about a particular element. Moving forward from my homepage to the details page lasted a long time and looked really unpolished. The main problem was that it took a considerable amount of time (i.e., more than one full second) to perform XAML analysis and create a new page. To get around this, I took the entire contents of my details page and moved it to UserControl, and I instantiate the global instance of this control when the application starts. The actual data page is now an empty wrapper containing the minimum XAML needed to create the page instance. In the code for this page, I handle the addition of a singleton UserControl as the only child of the page, and then in the OnNavigatedFrom handler, I remove the UserControl from the page. This allows me to shift the logic of XAML initialization and scene initialization from the time I navigate the page until the application started. Now, obviously, this makes my application take longer to run, but with the use pattern of my application, this compromise is worth it.

Using animation to hide inevitable work

The previous steps did not completely solve the problem, however, since there was still some time needed to bind / set the entire actual content of the information page, as well as the time required for the linker stream to complete the initial layout and page rendering. Unfortunately, you cannot do much about this. I tried to get around it as much as possible with smoke and mirrors, playing with my page transition animations. For example, I initially had an animation that would rotate the contents of the page from the screen using a full rotation of 90 degrees, and then rotate the contents of a new page using another rotation of 90 degrees. I changed them to rotate only partially, while reducing the opacity to / from 0. If this animation is fast enough, the human brain then does an amazing job of filling in the gaps and tricks of the viewer, believing that the page has turned all the way. My ForwardOut animation actually only rotates 50 degrees, but the viewer doesn’t notice it, and, in their opinion, they still extrapolate the rest of the animation after the actual animation is completed. This helps to hide the inevitable work required when navigating pages.