Intro Animation in XAML

  • Article

Animation is a based on change of certain value in the object over a duration. The value change can be the following type - DoubleAnimation, PointAnimatiom, ColorAnimation, LengthAnimation, FloatAnimation, SizeAnimation etc.. It's all based on type. So which type should I use? The type used is based on the property that you want to animate. Take obj.Opacity as an example, you will need to use DoubleAnimation. That's all you need to start using Animation.

Let's begin by drawing a Star shape in XAML (shape from MSDN):

<Canvas ID="root" xmlns="https://schemas.microsoft.com/2003/xaml">

  <Polygon

    Stroke="Blue"

    Fill="DarkOrange"

    StrokeThickness="1.0"

    Points="176.5,50 189.2,155.003 286.485,113.5 201.9,177 286.485,240.5

    189.2,198.997 176.5,304 163.8,198.997 66.5148,240.5 151.1,177

    66.5148,113.5 163.8,155.003">

  </Polygon>

</Canvas>

 

This will draw you a Star Shape with Orange Fill and blue outline. Now, let's apply our first animation to it.

 

<Canvas ID="root" xmlns="https://schemas.microsoft.com/2003/xaml">

  <Polygon

    Stroke="Blue"

    StrokeThickness="1.0"

    Points="176.5,50 189.2,155.003 286.485,113.5 201.9,177 286.485,240.5

    189.2,198.997 176.5,304 163.8,198.997 66.5148,240.5 151.1,177

    66.5148,113.5 163.8,155.003">

    <Polygon.Fill>

      <SolidColorBrush Color="Blue">

        <SolidColorBrush.ColorAnimations>

          <ColorAnimation From="Yellow" To="Blue" Duration="7"

            RepeatCount="500" AutoReverse="True"/>

        </SolidColorBrush.ColorAnimations>

      </SolidColorBrush>

    </Polygon.Fill>

  </Polygon>

</Canvas>

 

The red block above, is the addition to the original XAML. It specifies a ColorAnimation starting from yellow and gradually animating to Blue and reverse in 7 seconds. Once you have done one property animation, the concept is all the same for other properties. Let's try to add another one:

 

    <Polygon.Opacity>

      <DoubleAnimationCollection>

        <DoubleAnimation From="1" To="0.1" Begin="0"

          Duration="5" RepeatDuration="Indefinite"/>

      </DoubleAnimationCollection>

    </Polygon.Opacity>

 

The animation collection above apply to Opacity, changing from 1 to 0.1 in 5 seconds.

 

For more interesting animation you need to include Transform. Transform can be either Rotate, Scale, Skew, Translate and Matrix. Let's apply Rotate and Scale transform to our example:

<TransformCollection>

<RotateTransform Center="160,160" >

<RotateTransform.AngleAnimations>

<DoubleAnimationCollection>

<DoubleAnimation From="0" To="360"

RepeatCount="50" Begin="1" Duration="5" />

</DoubleAnimationCollection>

</RotateTransform.AngleAnimations>

</RotateTransform>

<ScaleTransform Center="50,50" >

<ScaleTransform.ScaleXAnimations>

<DoubleAnimationCollection>

<DoubleAnimation From="1" To="3"

RepeatCount="50" Begin="0" Duration="5" />

</DoubleAnimationCollection>

</ScaleTransform.ScaleXAnimations>

<ScaleTransform.ScaleYAnimations>

<DoubleAnimationCollection>

<DoubleAnimation From="1" To="3"

RepeatCount="50" Begin="0" Duration="5" />

</DoubleAnimationCollection>

</ScaleTransform.ScaleYAnimations>

</ScaleTransform>

</TransformCollection>

There are 2 transforms in the above XAML block. The first transform will rotate the shape 360 degree and the 2nd one scale the X and Y 3 times. You need a TransformCollection if you have more than 1 transform.

The final XAML:

<Canvas ID="root" xmlns="https://schemas.microsoft.com/2003/xaml">

<TransformDecorator >

<TransformDecorator.Transform>

<TransformCollection>

<!-- Rotate Transform -->

<RotateTransform Center="160,160" >

<!-- Angle Animation for Rotation -->

<RotateTransform.AngleAnimations>

<DoubleAnimationCollection>

<DoubleAnimation From="0" To="360"

RepeatCount="50" Begin="1" Duration="5" />

</DoubleAnimationCollection>

</RotateTransform.AngleAnimations>

</RotateTransform>

<!-- Scale Transform -->

<ScaleTransform Center="50,50" >

<!-- Double Animation for X -->

<ScaleTransform.ScaleXAnimations>

<DoubleAnimationCollection>

<DoubleAnimation From="1" To="3"

RepeatCount="50" Begin="0" Duration="5" />

</DoubleAnimationCollection>

</ScaleTransform.ScaleXAnimations>

<!-- Double Animation for Y -->

<ScaleTransform.ScaleYAnimations>

<DoubleAnimationCollection>

<DoubleAnimation From="1" To="3"

RepeatCount="50" Begin="0" Duration="5" />

</DoubleAnimationCollection>

</ScaleTransform.ScaleYAnimations>

</ScaleTransform>

</TransformCollection>

</TransformDecorator.Transform>

<Polygon

Stroke="Blue"

StrokeThickness="1.0"

Points="176.5,50 189.2,155.003 286.485,113.5 201.9,177 286.485,240.5

189.2,198.997 176.5,304 163.8,198.997 66.5148,240.5 151.1,177

66.5148,113.5 163.8,155.003">

<!-- Opacity Property Animation -->

<Polygon.Opacity>

<DoubleAnimationCollection>

<DoubleAnimation From="1" To="0.1" Begin="0"

Duration="5" RepeatDuration="Indefinite"/>

</DoubleAnimationCollection>

</Polygon.Opacity>

<!-- Fill Property Animation -->

<Polygon.Fill>

<SolidColorBrush Color="Blue">

<SolidColorBrush.ColorAnimations>

<ColorAnimation From="Red" To="Blue" Duration="7"

RepeatCount="500" AutoReverse="True"/>

</SolidColorBrush.ColorAnimations>

</SolidColorBrush>

</Polygon.Fill>

</Polygon>

</TransformDecorator>

</Canvas>

Content is provided "AS IS" with no warranties, and confers no rights.