Simple Animation in WinRT apps

I do a lot of animating in my apps. Even if it’s just a small animation, it can make the experience of using the app so much nicer. Animations such as this, where the sidebar fades out when adjusting the font size, and fades back in when the user “lets go” of the slider:
Sidebar fade animation

This animation uses a custom method I made so that I can animate UIElements with just one line of code;

For example, the animation above was done with this one line:

Here’s the actual Animate method:

Let me walk through this method.

Parameters:

  1. this DependencyObject target – This is the object that you want to animate.
  2. double from – this is the start position of the property you want to animate. For example, if you want to animate the opacity of a UIElement from 1 to 0, the from parameter would be 1.
  3. double to – this is the end position of the property you want to animate. Using the previous example, this would be 0.
  4. string propertyPath – This is the name of the property you want to animate. In our example, this would be “Opacity”.
  5. int duration – This is the duration of the animation in milliseconds. You can experiment with how fast your want your animation to be, but most times I like 300 milliseconds.
  6. int startTime – This is the time that the animation will start. (usually just set to 0)
  7. EasingFunctionBase easing = null – This is the easing function that the animation will use. (If you don’t know what an easing function is, head here) My favorite easing function is CubicEase, with the EaseOut easing mode. In this method, if you leave out this parameter, it will automatically set the easing function to CubicEase, but you can change that to your favorite function.
  8. Action completed = null – Sometimes I want my app to do something when the animation is done, so you can pass an Action here and it will be executed when the animation has finished. (If you leave it null, nothing will happen after the animation is finished.)

 Method Content:

First, the method checks to see if you left the easing function null. If so, it automatically sets it to a CubicEase with the EaseOut easing mode.

Next, it creates a DoubleAnimation, sets the to, from, easing function, and duration to the values you provided.

Next, it sets the target object that is to be animated, and the property of that object.

Next, it creates a new Storyboard, sets the begin time to the value you provided. Then it attaches the action you provided to the Completed event of the Storyboard (if you provided one).

Finally, it adds the DoubleAnimation to the Storyboard, and begins the animation.

 Conclusion:

That’s it! You can use this to animate any property of an object that is a Double value.

However, sometimes you have to make sure you are animating the right object. For example, if you want to animate an object to move from one point to another, you’ll need to animate the RenderTransform property of the object. Like this:

In this example, I’m animating the “X” position of a border. Notice that for the propertyPath parameter I’m using “TranslateX”. That is the property of the CompositeTransform that I want to animate.

 

Feel free to ask any questions or suggest improvements!

Thanks,

Joshua

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">