Animation in XAML (Silverlight 5, WPF, Windows 8 METRO)

There is post in future, where the animation is applied to templated control Templated custom controls in XAML and example in git.

Storyboard

Storyboard is a controller that manages animation.

Storyboard containns timer that starts ticking after "Storyboard.BeginTime" time, during "Storyboard.Duration" time.
If you define "AutoReverse" property, animation duration will be doubled automatically.
So if you want to calculate animation duraction, it would be "BeginTime + Duration / SpeedRatio" if "AutoReverse" property is false and "BeginTime + Duration / SpeedRatio * 2" in the other case.

Storyboard also provides some method that allows managing animation (play, stop, seek, get current time and so on)

The "Children" property contains an list of animation describers.

Animation describers

Animation describers it's some amount of data that describes how object properties must change their values during animation time.

There are two types of animation in Silverlight:

• From/To/By animations - this animation types are describing first and last object state for current animation cycle;
• Key-frame animations - this type of animation are describing object states by each moment of time.

Animation is going acording to the some control property. These properties can be a numeric values, color or point.

Storyboard provides easy way to animate color and motion fluently. It is animation for color, numeric and pont values.

As you might guess Silverlight doesn't provide animation for any other property types because it isn't avident how other propertie types should describe intermediate values.

Describing "From/To/By" based animation

There are some classes which are describing animation parameters.

• Color animation describes - ColorAnimation
• Numeric values animation - DoubleAnimation
• Point values (X,Y) - PointAnimation

To make animation of this type, you have to define such animation parameters:
"From" - defines starting property value (this propertie equals to current value if you not define it);
"To" - final value (equals to value thet was defined in control);
"Duration" - the animation duration (length).

Difference in default values between "From" and "To": Default value for "From" is the value on which last animation was stoped and default value for "To" is the value that was assigned to control.
For example: if we had defined for control value 40px and last animation has changed it to 20px, our properties for animation would have such default values: From=20px, To=40px. It helps making fluent transition between different animations.

Note: In Windows 8 METRO application the From and To default values are defining only on storyboard loading so sometimes it leads to incorrect animation working (when you are chenging properties in runtime). In Silverlight and WPF it works fine.

There are some other additional properties that allows you to delay your animation start, define incrementation for current value, make animation reversable and the other stuf you can read about in the documentation.

The record below describes how to animate "Width" propery of "MyAnimatedShape". It animates this property from 100 to 300 with duration in 1 second.

            <DoubleAnimation 
                Storyboard.TargetName="MyAnimatedShape" 
                Storyboard.TargetProperty="Width"
                From="100"
                To="300" 
                Duration="0:0:1" />

Color animation are making the same way. Property "To" in this case describes color. But how do we get animation for "Fill" property of circle object if it isn't a color? Fill property is a Brush.
It resolves very easy. We can define property from property in animation TargetProperty (actually we can make property chain with any level of imlicity).
Property in chains splitted by dots, every property in this chain describes with such structure (Class.Property). I.e. to describe "Fill" property of Ellipse type you have to use this (Ellipse.Fill), to describe property "Color" of SolidColorBrush you have to use it (SolidColorBrush.Color) and if you want to make properties chain you have to use such string "(Ellipse.Fill).(SolidColorBrush.Color)".
You can also use array accessors in this string

Color animation for solid color brush:

            <ColorAnimation 
                Storyboard.TargetName="MyAnimatedCircle"
                Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
                To="Orange"
                Duration="0:0:1" />

Color animation for linear gradient brush:

            <ColorAnimation 
                Storyboard.TargetName="MyAnimatedCircle"
                Storyboard.TargetProperty="(Ellipse.Fill).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"
                To="Orange"
                Duration="0:0:1" />       

Describing frame based animations.

Sometimes you have to make difficult animation, even something like cartoons. In this case you have to use animation based on key-frames.
Key-frame describes value/state of the object property at the one moment of time. E.g. "Width" property must be set to 100 at 0 second, 300 at 1 second and come back to 100 at 2 second.

This animation is describing same as "From/To/By animations" with only one exception, insted of "From" and "To" values it uses colection of the values and time when this value must be showed, e.g:

            <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="MyAnimatedCircle" 
                Storyboard.TargetProperty="Width">
                <DiscreteDoubleKeyFrame KeyTime="0" Value="100" />
                <LinearDoubleKeyFrame KeyTime="0:0:1" Value="300" />
                <LinearDoubleKeyFrame KeyTime="0:0:2" Value="100" />                
            </DoubleAnimationUsingKeyFrames>

This animation doing the same as en animation example for DoubleAnimation described above except returning width value 100 at 2 sec. time.

There are four classes for describing key based animation:

• Color animation describes - ColorAnimationUsingKeyFrames
• Numeric values animation - DoubleAnimationUsingKeyFrames
• Point values (X,Y) - PointAnimationUsingKeyFrames
• Any object values - ObjectAnimationUsingKeyFrames

All animation describers except "ObjectAnimationUsingKeyFrames" support fluent animation between frames.