Mango Sample: 5 Must-Have Animations: Part 3

This article is part 2 in a three part series.

1. Part 1: Animation guidelines
2. Part 2: Animation 1 – 4
3. Part 3: Animation 5: Delete Item

Animation 5: Delete Item

This is the last of my favorite animations. Delete Item is dramatic, but communicative and fast. It is also consistent.

We see this animation used in Email when a message is deleted. Without a doubt, this is my favorite of them all – because it is so visually communicative.

It’s a combination of animations:

1. Select Item
   Shrink it using the ScaleTransform’s ScaleX and Scale Y properties.
2. Unload Item
   Drop it using the TranslateTransform’s X property.

Note: You might have already noticed that we are using two Transforms to accomplish this. As a result, we need an additional object called the TransformGroup.

This will act as the container of the two transforms. It will be this TransformGroup that we will set to the LayoutRoot’s RenderTransform property.

There are two important parts to this animation:

1. It is fast – the user does not feel they are losing time watching their item deleted
2. It results in a page navigation back to an updated list without the deleted item

Implementation

What makes this more than just a combination of animations is that the different animations must follow in parallel. There are different techniques to accomplish this. In this case, I am using the BeginTime property of the second animation (the drop animation). This causes it to wait for a specified period before animating.

Take a look:

In the code above we introduce the TransformGroup. This is necessary because we have two transforms to animation – the ScaleTransform and the TranslateTransform. The TransformGroupwill contain these different transforms we need.

Just like in the Select Item animation, we create two double animations – for the ScaleX and ScaleY properties respectively. The animation will take .25 seconds. This is a nice, fast duration, but easy for the user to see occur.

In the code above, see the BeginTime property in the DoubleAnimation initializer? This will cause the animation to wait for .45 seconds. The resulting UI effect is that the initial resize will occur, there will be a brief pause, and the drop will start, just like in the Unload Item animation.

Note: You might also notice that there is no easing method here. The reason for this is not oversight. It is because we want to communicate, visually, that the content is being thrown away. Easing would show a kind of hesitation.

Overall this is a beautiful effect – and easy to implement thanks to my Delete() method.

Get the code here.

Conclusion

Animation is a powerful tool in any Windows Phone application developer’s toolbox. However, with great power comes great UI. Though it is easy to overdue things. Though it is easy to be a little too eager. It is equally easy to underdo things. Animations are not just a tool we can use, they are a tool we should use.

• Animations allow our application to look natural, fitting in with the phone’s native applications
• Animations make our applications cool and fun to use, leveraging Silverlight’s animation engine

Most of all, animations are a wonderful defense against the UNISTALL button!

Remember the basic animations:

1. Turnstile
2. Select Item: get the code
3. Load Item: get the code
4. Unload Item: get the code
5. Delete Item: get the code

I hope these drop-in methods are useful to you while building your Windows Phone applications.

Best of luck!