WP7 – Page Transitions Sample

Before going into the code, here are some thoughts I have on page transitions and animations on the phone in general:

• Animations are a key part of the metro experience. With the focus on text and minimal chrome it’s important to add animations to make the UI have some life.  They also “surprise and delight the user” as the Metro marketing material would say.
• Aside from the visual wonder created by animations, they also server some other purposes:

• The type of transition conveys meaning: The continuum animations provide context when drilling into a detail screen or task, sliding animations signify the creation of something new, etc.  Matching the way the OS does transitions makes your app seem intuitive and it can conveys ideas without taking up the limited space on a mobile device.
• Transitions can improve perceived responsiveness of the application

Don’t over -animate.

• Avoid long, gratuitous animations just because you can easily create storyboards in xaml.  The native apps use some well thought out, subtle animations so try to follow that example for UX consistency. The timings on the native animations are fairly short – usually less than 350 ms. If you have much longer animations you are probably doing something that is going to look weird and make the app seem slow (some exceptions are the pano slide in animation which is around 1 – 1.5 seconds and the feather might have a longer total duration depending on the amount of items that feather in/out).
• Animations should enhance the user’s experience, not become distracting or annoying.
• If something needs to rotate out like a turnstile, you don’t actually have to rotate a full 90 degrees.  You can just rotate partially and then change the opacity to 0.  Your mind will fill in the missing part of the animation. Cutting the amount of time actually animating frees the phone up to load the new UI while it appears that you are still animating. Look carefully at the native app transitions. They actually animate less than you probably think and use somewhat simple storyboards. For example the turnstile animation is somewhat close to forward out:  0 to 50 and forward in: –80 to 0. In summary, use animations to help create the illusion of  performance.

When animating between pages, it’s really important that the pages load as fast as possible.  There are a few ways to do this:

• Minimize code in the constructor and loaded event.  Ideally you should do nothing until the animation is complete.
• Data binding is really slow on the phone and lots of it will just cut any transition.  Try to not databind until after the transition is done.  For example, pass data in the querystring from the previous page and set it directly on the next page.  You want to have some visuals on the page to transition to, but just enough so there is something to actually transition to.  If you need to fetch more data, do it after the animation is complete. Keeping lean xaml will help the page load faster.
• Image downloading / decoding just hammers the UI thread. It’s going to be hard to animate a page in smoothly if you are setting some giant background image from a url.

Make sure your animations run on the compositor thread.  This is covered in detail in the Creating High Performing Silverlight Applications for Windows Phone.  So just to be clear, if part of your storyboard does something that is not supported on the compositor thread, then your storyboard will not run on the compositor thread. (I could be wrong on that point, although it seems to be the case)

Pick an easing function and stick with it. There are several easing function to choose from, but it looks weird if you start to mix and match.  If you use exponential easing (and you should since that is the closest approximation to what the native apps do), just use that and vary the mode, duration, timing.  Obviously you should use some type of easing if you want avoid an oddly robotic looking transition.

Since transitions are so important on the phone it would be great if future versions of the wp7 sdk included some prebuilt animations and events that would help actually running the transitions.  At least that is what I’d prefer.  Since that doesn’t exist I created a little helper framework that allows me specify a type of transition with the right elements when a page is about to navigate.

Types of animations on the phone

Read more: Clarity Consulting

Posted via email from .NET Info