Nov 252009
 

In my previous blog, I wrote about the simplest form of animation in Silverlight – the FromTo animation, which allows you to modify the value of Control properties thus giving animation effects like Fading in-out, movement and many more. KeyFrame animation is different as in it gives you more control in defining both the duration and the value of the property in each animation.

Like in the FromTo animation, you can set the Target, AutoReverse, BeginTime and RepeatBehavior for KeyFrame as well. Lets look at a simpleKeyFrame animation. In this we manipulate both the Color and the FontSize property. The SplineDoubleKeyFrame property has a key and value pair which allows us to specify the value at that exact point of time.

Here is the markup.

<Grid x:Name="LayoutRoot" Height="Auto" Width="300">
       <Grid.Triggers>
           <EventTrigger RoutedEvent="Grid.Loaded">
               <TriggerActionCollection>
                   <BeginStoryboard>
                       <Storyboard>
                           <DoubleAnimationUsingKeyFrames
               Storyboard.TargetName="AnimateText"
               Storyboard.TargetProperty="FontSize"
               BeginTime="00:00:00"
               RepeatBehavior="Forever"
                               AutoReverse="True">
                               <SplineDoubleKeyFrame KeyTime="00:00:02" Value="50" />
                               <SplineDoubleKeyFrame KeyTime="00:00:06" Value="75" />
                               <SplineDoubleKeyFrame KeyTime="00:00:08" Value="90" />
                               <SplineDoubleKeyFrame KeyTime="00:00:10" Value="80" />
                               <SplineDoubleKeyFrame KeyTime="00:00:14" Value="35" />
                           </DoubleAnimationUsingKeyFrames>
                           <ColorAnimationUsingKeyFrames
                               Storyboard.TargetName="solidBrush"
                               Storyboard.TargetProperty="Color"
                               BeginTime="00:00:00"
                               RepeatBehavior="Forever"
                               AutoReverse="True">
                               <SplineColorKeyFrame KeyTime="00:00:02" Value="Red" />
                               <SplineColorKeyFrame KeyTime="00:00:04" Value="Blue" />
                               <SplineColorKeyFrame KeyTime="00:00:06" Value="Black" />
                               <SplineColorKeyFrame KeyTime="00:00:08" Value="Beige" />
                               <SplineColorKeyFrame KeyTime="00:00:10" Value= "DarkGreen" />
                           </ColorAnimationUsingKeyFrames>
                       </Storyboard>
                   </BeginStoryboard>
               </TriggerActionCollection>
           </EventTrigger> 
       </Grid.Triggers>
       <TextBlock x:Name="AnimateText" 
                  FontSize="35" 
                  Text="Hello World"
                  TextWrapping="Wrap"
                  >
           <TextBlock.Foreground>
               <SolidColorBrush x:Name="solidBrush"
                                Color="Black" />
           </TextBlock.Foreground>
       </TextBlock>
      
   </Grid>

Here is the sample:-


Get Microsoft Silverlight