This is the second part in Jerry Nixon's series on how to create the most popular animations for your Windows Phone apps. Animations include a peel-away animation for the tiles and some neat selection and loading animnations.

Must Have Animations

Animation 1: The Turnstile

This animation “peels” off each ListBoxItem in a ListBox\r\n one at a time (from bottom to top when transitioning out, from top to \r\nbottom when transitioning in) until the list is gone. Animating the ProjectionPlane, this gives the appearance that items are coming toward you.

The\r\n start menu uses this animation with the tiles. The application list off\r\n the start menu uses this animation with the list items.

This \r\nanimation takes less than a second. It has two Metro-oriented \r\ncharacteristics. The first is a generic illustration that the page is \r\ntransitioning (the list is going away) – of course our user doesn’t know\r\n what a “page” is. Second, the currently selected item transitions last.\r\n It’s subtle, but reassures the user their selection was properly \r\naccounted.

Animation 2: Select Item

This\r\n animation selects an item in a list. It is subtle. The selected item is\r\n depressed slightly. This is accomplished by using a ScaleTransform to animate the ScaleX and ScaleY properties from 1 to .75 (or some other decimal). It requires the CenterX and CenterY properties to be set to 50% of the ListBoxItemRenderSize Width.

Note: a sophisticated version of this animation leverages the ProjectionPlane\r\n to depress the selected item to the left or right side, based on the \r\nuser’s touch. This additional complexity might be a bit too subtle for \r\nmy taste – it also provides considerably little value to the user. FYI: \r\nExamples of this version are everywhere. It is Email, Calendar, the \r\nApplication list off the start menu, even the tiles on the Start Menu.

Implementation

I am basing this example on the user tapping a ListBoxItem in a ListBox. We’ll handle the SelectionChanged event, like this:

In the code above, see the ItemContainerGenerator line? This is the class in a ListBox that let’s us access the selected LIstBoxItem.

Also,\r\n see the TODO? This anonymous method let’s us do something, like \r\nnavigate away from this page, as a result of the user’s selection.

In the code above, see how we are setting the element’s RenderTransform property to a new ScaleTransform?\r\n We must assume there is no transform on the item – and we will need it \r\nin order to animate it. Our ScaleTransform sets the CenterX and CenterY \r\nproperties so that it will resize to the center of the existing \r\nRenderSize. In the event that you already have such a transform in your \r\nXAML, then you will need to make some adjustments. Then we create the \r\ninitial storyboard and timeline.

In\r\n the code above, we are creating two double animations (for a single \r\nstoryboard). One to animate ScaleX and another to animate ScaleY. We \r\nwant the element to uniformly animate, so we must animate both. They are\r\n basically identical animations. THeir durations are inherited from the \r\nduration of the storyboard we set in the previous code.

In the code above, we wrap up this method by handling the Completed event. In this case, I am using an anonymous method as a callback. If you need a refresher on callbacks, check out my previous post. We need to handle the Completed event so we can do something after the animation is finished. Then we call Begin() to start the animation.

Animation 3: Load Item

This\r\n animation is so simple and so pleasant. Instead of popping a new page’s\r\n content, content is gently raised and revealed. The raising is \r\naccomplished through TranslateTransform.Y animation. The reveal is accomplished through Opacityanimation. The whole storyboardduration is .75 seconds. It gives the user that the content is “being brought in”.

Implementation

The\r\n Loaded event is the right time to execute this animation. It is \r\nimportant that the LayoutRoot element in XAML (or whatever you call your\r\n root element) have its visibility property set to collapsed. This way \r\nthe reveal is smooth.

In\r\n the code above, I am handling the Loaded event, testing the Visibility \r\nvalue and calling ShowHide(), my method to animate the LayoutRoot \r\nelement. Setting _TopFrom to the page’s height let’s the slide animation\r\n cross the full height of the phone. It’s a pleasant effect.

In\r\n the code above, I am setting up the TranslateTransform that will let me\r\n move the LayoutRoot from the bottom of the screen to the top. I default\r\n the Visibility and Opacity property of the LayoutRoot – then later I \r\nwill start the animation from those values.

In\r\n the code above, I am setting up two animations. The first is a double \r\nanimation for Opacity. This animation will animate from opacityFrom to \r\nopacityTo (both method arguments). The second is a double animation for \r\nthe X property of the TranslateTransform. Zero is the original position.\r\n

In\r\n the code above, I am handling the Completed event. Because ShowHide() \r\nis a generic method for both showing and hiding, it uses a callback. \r\nSince we are discussing the Item Load animation to reveal the content, \r\nwe know that there is nothing to do in the callback other than just let \r\nit load.

Animation 4: Unload Item

The\r\n Unload Item animation is the opposite of the Load Item animation \r\ndiscussed above. Instead of revealing the item from the bottom, it \r\ndissolves the content to the bottom. The relationship between the two \r\nand the consistency with the rest of the system is very communicative to\r\n the user.

In\r\n the code above, notice that this is a simple inverse of the Reveal \r\nlogic. We are sending the top to the bottom of the page, and animating \r\nOpacity to 0. When it is done, we implement the callback to GoBack(). Note that in your code GoBack() may not be a valid action. Update this code to fit your app.