esponjasoft

In the first post of this series we talked about Color animations, one of the simplest form of Silverlight animations. In this post, we'll cover another simple animation, Value-changing animations, known as DoubleAnimations.

For brevity's sake, we will continue on the example we built on the past post (the amazing color-changing circle!). 

1. For this sample, apart from making the circle change color when the mouse enter and leaves, it will also change its size.  Since we are adding another element to the currently existing animation (the size change), it won't be necessary to add new storyboards. We will only add a couple of DoubleAnimation elements, one for the RedCircleAnimation_MouseEnter storyboard, and one for the RedCircleAnimation_MouseLeave.

   <UserControl x:Class="SilverlightAnimations.Page"

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="70" Height="70">

       <Grid x:Name="LayoutRoot" Background="White">

           <Ellipse x:Name="RedCircle" Height="60" Width="60"

              Fill="Red"

              MouseEnter="RedCircle_MouseEnter"

              MouseLeave="RedCircle_MouseLeave" >

               <Ellipse.Resources>

                   <Storyboard x:Name="RedCircleAnimation_MouseEnter">

                       <ColorAnimation

                         Duration="00:00:02"

                         To="Blue"

                         Storyboard.TargetName="RedCircle"

                         Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />

                       <DoubleAnimation />

                   </Storyboard>

                   <Storyboard x:Name="RedCircleAnimation_MouseLeave" >

                       <ColorAnimation

                         Duration="00:00:02"

                         To="Red"

                         Storyboard.TargetName="RedCircle"

                         Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />

                       <DoubleAnimation />

                   </Storyboard>

               </Ellipse.Resources>

           </Ellipse>

       </Grid>

   </UserControl>  

    

2. Once we added the DoubleAnimation elements, it's time to modify its attributes. According to MSDN a DoubleAnimation "Animates the value of a Double property between two target values using linear interpolation over a specified Duration ". In order to change the size of our figure, we will change it's Height and Width (both of which are doubles). Since every DoubleAnimation only animates the change of one value, we'll have to add another DoubleAnimation to each storyboard. This way, we'll have one DoubleAnimaton for the height change, and one DoubleAnimation for the width change.

   ...

   <Ellipse.Resources>

       <Storyboard x:Name="RedCircleAnimation_MouseEnter">

           <ColorAnimation

             Duration="00:00:02"

             To="Blue"

             Storyboard.TargetName="RedCircle"

             Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />

           <DoubleAnimation

              Duration="00:00:02"

              To="80"

              Storyboard.TargetName="RedCircle"

              Storyboard.TargetProperty="Height" />

           <DoubleAnimation

              Duration="00:00:02"

              To="80"

              Storyboard.TargetName="RedCircle"

              Storyboard.TargetProperty="Width" />

       </Storyboard>

       <Storyboard x:Name="RedCircleAnimation_MouseLeave" >

           <ColorAnimation

             Duration="00:00:02"

             To="Red"

             Storyboard.TargetName="RedCircle"

             Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />

           <DoubleAnimation

              Duration="00:00:02"

              To="60"

              Storyboard.TargetName="RedCircle"

              Storyboard.TargetProperty="Height" />

           <DoubleAnimation

              Duration="00:00:02"

              To="60"

              Storyboard.TargetName="RedCircle"

              Storyboard.TargetProperty="Width" />

       </Storyboard>

   </Ellipse.Resources>

   ...

   As you can tell, the DoubleAnimation has almost the same attributes as a ColorAnimation. The only difference is the attribute To, which instead of a color, it has a value. Other than that, it is exactly the case.

   To thing to notice is that when a storyboard has more than one element (as is the case in our example) all of the elements are executed at the same time. In this case, all of the Duration attributes have the same value, therefore, the circle will both change color and size at the same time. If I were to change the duration of any of the elements, then that animation would end at a different time (which, if used properly, could lead to interesting animations).

3. The code behind won't need any change. Calling Storyboard.Begin() will be enough to start the three elements of each storyboard.

   private void RedCircle_MouseEnter(object sender, MouseEventArgs e)

   {

       RedCircleAnimation_MouseEnter.Begin();

   }

    

   private void RedCircle_MouseLeave(object sender, MouseEventArgs e)

   {

       RedCircleAnimation_MouseLeave.Begin();

   }

4. After setting the code, we'll have a circle that not only changes color from red to blue (and back), but one that grows bigger and smaller as well.

With this we conclude with our second installment of the Silverlight Animations series. Be sure to come back for the next episode!

The complete code of the animation can be obtained here.