Creating Key Frame animations
<UserControl x:Class='SilverlightApplication3.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" Background="LightGray" >
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<TriggerActionCollection>
<BeginStoryboard>
<Storyboard x:Name="Storyboard1"
RepeatBehavior="Forever">
<DoubleAnimationUsingKeyFrames AutoReverse="True"
Storyboard.TargetName="ball"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)"
BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:00:01" Value="100"/>
<SplineDoubleKeyFrame KeyTime="00:00:02" Value="200"/>
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="290"/>
<SplineDoubleKeyFrame KeyTime="00:00:03.5" Value="306"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames AutoReverse="True"
Storyboard.TargetName="ball"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
BeginTime="00:00:00">
<SplineDoubleKeyFrame KeyTime="00:00:03" Value="1"/>
<SplineDoubleKeyFrame KeyTime="00:00:03.5" Value="0.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</TriggerActionCollection>
</EventTrigger>
</Grid.Triggers>
<Ellipse x:Name="ball"
VerticalAlignment="Top"
Margin="0,20,0,0"
Height="100" Width="100"
Fill="Blue"
RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
<Canvas Background="DarkGray"
VerticalAlignment="Bottom"
Height="70" Width="640" />
</Grid>
</UserControl>
Related examples in the same category
