In Silverlight objects can be animated by applying animation to their individual properties like path, color etc. A typical animation using sequence of images can also be achieved as demonstrated in the code below. We will rotate 5 images to create illusion of moving cartoon characters.

 

<UserControl x:Class=”eMantraNet.Sample1.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:DesignHeight=”100″ d:DesignWidth=”500″ Width=”500″ Height=”100″>

<UserControl.Resources>
<Storyboard x:Name=”sbAnimateImage”>

<DoubleAnimationUsingKeyFrames
Storyboard.TargetName=”animImg”
Storyboard.TargetProperty=”(Canvas.Left)”
RepeatBehavior=”Forever” AutoReverse=”False”>
<DiscreteDoubleKeyFrame Value=”0″ KeyTime=”0:0:0.0″ />
<DiscreteDoubleKeyFrame Value=”40″ KeyTime=”0:0:0.4″ />
<DiscreteDoubleKeyFrame Value=”80″ KeyTime=”0:0:0.8″ />
<DiscreteDoubleKeyFrame Value=”120″ KeyTime=”0:0:1.2″ />
<DiscreteDoubleKeyFrame Value=”160″ KeyTime=”0:0:1.6″ />
<DiscreteDoubleKeyFrame Value=”200″ KeyTime=”0:0:2.0″ />
<DiscreteDoubleKeyFrame Value=”240″ KeyTime=”0:0:2.4″ />
<DiscreteDoubleKeyFrame Value=”240″ KeyTime=”0:0:2.8″ />
<DiscreteDoubleKeyFrame Value=”240″ KeyTime=”0:0:3.8″ />
</DoubleAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames RepeatBehavior=”Forever” AutoReverse=”False”
Storyboard.TargetName=”animImg”
Storyboard.TargetProperty=”Source”>
<ObjectAnimationUsingKeyFrames.KeyFrames>
<DiscreteObjectKeyFrame KeyTime=”0:0:0.0″>
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource=”Resources/Pic0.png”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime=”0:0:0.4″>
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource=”Resources/Pic1.png”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime=”0:0:0.8″>
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource=”Resources/Pic2.png”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime=”0:0:1.2″>
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource=”Resources/Pic3.png”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime=”0:0:1.6″>
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource=”Resources/Pic4.png”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime=”0:0:2.0″>
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource=”Resources/Pic5.png”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime=”0:0:2.4″>
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource=”Resources/Pic0.png”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime=”0:0:2.8″>
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource=”Resources/Pixel.png”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
<DiscreteObjectKeyFrame KeyTime=”0:0:3.8″>
<DiscreteObjectKeyFrame.Value>
<BitmapImage UriSource=”Resources/Pixel.png”/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames.KeyFrames>
</ObjectAnimationUsingKeyFrames>

</Storyboard>
</UserControl.Resources>

<Grid x:Name=”LayoutRoot” >
<Canvas>
<Image Canvas.Left=”0″ x:Name=”animImg” Width=”304″
HorizontalAlignment=”Center” VerticalAlignment=”Center”
Source=”Resources/Pic0.png”>
</Image>
</Canvas>
</Grid>
</UserControl>

Add the line below in the class to start animation

this.sbAnimateImage.Begin();

That was all we needed to do to create this cute animation and now we can add some bubble dialogues to make our little movie 🙂 If you prefer you can add your voice in stead of bubble dialogues.

Silverlight animation using image frames

Leave a Reply

Your email address will not be published. Required fields are marked *