Mega Code Archive

 
Categories / Silverlight / Animations
 

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>