Blog
Windows 8 using XAML: Animation Class and Enabling Animation
By Ken Getz | February 13, 2013
In Windows 8, animations are an integral part of the user experience. As you work with various Windows Store applications (or the built in user interface), you'll find animations at every turn: From the log-in screen, to the Start menu, to any application, animated transitions are everywhere.
Although you're better off using the built-in theme transitions, there are many reasons why you might want to create your own custom animations. If at all possible, you'll want to avoid using any more dependent animations than you must (that is, animations that run on the UI thread), but in some cases, that's the only way to create the necessary
XAML animation revolves around changing the value of a single dependency property over time. You might change the width of a button from 30 to 100 pixels over a period of 10 seconds. Perhaps you might change the position of a gradient stop from 0 to 1 over 5 seconds. It's all about finding the right property to change, and the correct length of time over which to
The Animation Class
Within the following markup, locate the DoubleAnimation element:
<DoubleAnimation From="100"EnableDependentAnimation="True"To="200"Duration="0:0:5" />As you might infer from the attributes, this animation element indicates that the animation should take some property from a value of 100 to 200, over a duration of 5 seconds.
This element creates an instance of the DoubleAnimation class, one of theseveral different classes that animate different types of properties. You can choose from multiple types of animation classes:
- Linear interpolation: The changing property value varies smoothlyand continuously for the duration of the animation. Silverlight includes three such classes, while WPF includes the following commonly usedclasses, plus several others: DoubleAnimation, PointAnimation, andColorAnimation.
- Key-frame animation: Values can change abruptly and/or they can change using linear interpolation. Silverlight includes four such classes, while WPF includes the following commonly used classes,plus several others: DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, ColorAnimationUsingKeyFrames,and ObjectAnimationUsingKeyFrames.
The DoubleAnimation instance you've seen smoothly and continuously varies the value of a property from 100 to 200 over the course of five seconds. But the markup doesn't indicate what property to change! That requires another >element-the Storyboard element.
Enabling the Animation
In Windows Store applications, not all animations are allowed to run, by default. If your animation might have an impact on your application (specifically, animations that affect the layout), you must specifically enable the animations-they won't run, otherwise. To enable the animation, set the Animation.EnableDependentAnimation property to True. Animating some properties, such as Opacity, don't require setting this property to True, as this animation wouldn't affect the layout of the application-in general, animating any property that causes an element to move or adjust the layout of the page requires this property to be set to True.
This post is an excerpt from the online courseware for our Windows 8 Using XAML: Bindings, Shapes, and Animation course written by expert Ken Getz.
