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

Nov 122009
 

The audience which the web was catering to, has drastically changed in the last 10 years. From primary being a one way of source of information for its users, the web has evolved into a massive aggregator with which users can both create and consume information. This meant a sea change for web developers and application designers where they had to make their User interface much more interactive and closer to windows applications.

Adobe Flash and Microsoft Silverlight are a step in that direction. Groundbreaking animation is possible with these technologies. We will take a look at some simple animation in Silverlight today. First the simplest animation possible. The Double animation works by moifying a double property of the application in a time bound way. Suppose we want to create a rectangle that disappears and reappears every second. Lets take a look at the XAML.

<UserControl x:Class="SLAnimation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
        <StackPanel >
            <StackPanel.Resources>
                <Storyboard x:Name="AppStoryBoard">
                    <DoubleAnimation x:Name="clickAnim"
                                     Storyboard.TargetName="animRectangle"
                                     Storyboard.TargetProperty="Opacity"
                                     From="1.0" To="0.0" Duration="0:0:1"
                                     AutoReverse="True"
                                     RepeatBehavior="Forever" />
                </Storyboard>
            </StackPanel.Resources>
            <TextBlock TextAlignment="Center" FontSize="30" FontFamily="Verdana">Double Animation in Silverlight</TextBlock>
            <Rectangle x:Name="animRectangle" MouseLeftButtonDown="animRectangle_MouseLeftButtonDown"
                       Width="200" Height="100" Fill="Red" ></Rectangle>
        </StackPanel>
    </Grid>
</UserControl>

If you see this code, the animation is defined in the Storyboard tag which contains the code of how exactly the animation will behave. It specifies the target control and also the property which has to be altered. Then we give the for loop for changing the transparency along with the step property. Once the story board is done, you need to write the control which is the target of the StoryBoard, a simple rectangle. However, a presence of a storyboard is not enough to start the animation. This is done in the code behind.

        public MainPage()
        {
            InitializeComponent();
        }
 
        private void animRectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            AppStoryBoard.Begin();
        }

Even this can be achieved through XAML alone as we will see in the next example. In this looping animation two rectangles will move to the opposite ends of the canvas before returning. The best part is there is no code behind involved. The Storyboard is triggered by the EventTriggers tag in Silverlight. This time the property that is modified is the Canvas.Left. One rectangle already has this property set to 0 and one has it to 280. And in the storyboard, there are respective DoubleAnimation tags added. One of them increases the first rectangle’s Canvas.Left property from 0 to 280 and the other vice versa. Since the RepeatBehavior is set to Forever, it seems like an endless loop.

<Canvas>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded" >
<EventTrigger.Actions>
    <BeginStoryboard>
        <Storyboard x:Name="animRectangle1"
                    Storyboard.TargetName="Rectangle1"
                    Storyboard.TargetProperty="(Canvas.Left)" RepeatBehavior="Forever">
            <DoubleAnimation To="280" Duration="0:0:15"></DoubleAnimation>
            <DoubleAnimation To="0" Storyboard.TargetName="Rectangle2" Duration="0:0:15"></DoubleAnimation>
        </Storyboard>
    </BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
<TextBlock TextAlignment="Center" FontSize="30" FontFamily="Verdana">Moving Animation in Silverlight</TextBlock>

<Rectangle x:Name="Rectangle1" Canvas.Left="0" Canvas.Top="40" Width="20" Height="20" Fill="red"></Rectangle>
<Rectangle x:Name="Rectangle2" Canvas.Left="280" Width="20" Canvas.Top="40" Height="20" Fill="Blue"></Rectangle>
</Canvas>

So we saw how easy it is to create simple animation with Silverlight. Below is a simple preview of the application. And as one more demonstration of the platform independent nature of Silverlight, I just wrote the object tag for the Silverlight .xap file and thats it, it works in WordPress’s PHP without any hiccups.

Get Microsoft Silverlight