Bouncing Ball with DoubleAnimation

image_pdfimage_print


   
      
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:s="clr-namespace:System;assembly=mscorlib">


    <Ellipse Name="elips" Width="24" Height="24" Fill="Red" 
             Canvas.Left="96">

        <Ellipse.Triggers>
            <EventTrigger RoutedEvent="Ellipse.Loaded">
                <BeginStoryboard>
                    <Storyboard TargetName="elips" RepeatBehavior="Forever">
                        <DoubleAnimation 
                                Storyboard.TargetProperty="(Canvas.Top)"
                                From="96" To="480" Duration="0:0:1"
                                AutoReverse="True" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Ellipse.Triggers>
    </Ellipse>
</Canvas>

   
    
    
    
    
    
     


KeySpline Animation

image_pdfimage_print


   
      

<Window x:Class="Animation.KeySplineAnimation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="KeySplineAnimation" Height="249.6" Width="624"
    >
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="(Canvas.Left)" >
                            <SplineDoubleKeyFrame KeyTime="0:0:5" Value="250" KeySpline="0.25,0 0.5,0.7"></SplineDoubleKeyFrame>
                            <SplineDoubleKeyFrame KeyTime="0:0:10" Value="500" KeySpline="0.25,0.8 0.2,0.4"></SplineDoubleKeyFrame>
                        </DoubleAnimationUsingKeyFrames>

                        <DoubleAnimation Storyboard.TargetName="ellipse2" Storyboard.TargetProperty="(Canvas.Left)" To="500" Duration="0:0:10">
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Window.Triggers>
    <Canvas Margin="10">
        <Ellipse Name="ellipse1" Canvas.Left="0" Fill="Red" Width="10" Height="10"></Ellipse>
        <Ellipse Name="ellipse2" Canvas.Top="150" Canvas.Left="0" Fill="Red" Width="10" Height="10"></Ellipse>
    </Canvas>
</Window>

   
    
    
    
    
    
     


Ball moves in a constant speed

image_pdfimage_print


   
      
<Window x:Class="SplineKeyFrameAnimation"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Spline Key Frame Animation" Height="250" Width="400">
  <Canvas Margin="5">
    <Ellipse Name="ball1" Canvas.Left="10" Canvas.Top="50" Width="20" Height="20">
      <Ellipse.Fill>
        <RadialGradientBrush>
          <GradientStop Color="Gold" Offset="0" />
          <GradientStop Color="DarkGoldenrod" Offset="1" />
        </RadialGradientBrush>
      </Ellipse.Fill>
    </Ellipse>
    <Canvas.Triggers>
      <EventTrigger RoutedEvent="StackPanel.Loaded">
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="ball1"
                Storyboard.TargetProperty="(Canvas.Left)" To="310"
                Duration="0:0:10" RepeatBehavior="Forever" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </Canvas.Triggers>
  </Canvas>
</Window>

   
    
    
    
    
    
     


Ball moves following spline key frames

image_pdfimage_print


   
      

<Window x:Class="SplineKeyFrameAnimation"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Spline Key Frame Animation" Height="250" Width="400">
  <Canvas Margin="5">
    <Ellipse Name="ball2" Canvas.Left="10" Canvas.Top="160" Width="20" Height="20">
      <Ellipse.Fill>
        <RadialGradientBrush>
          <GradientStop Color="Gold" Offset="0" />
          <GradientStop Color="DarkGoldenrod" Offset="1" />
        </RadialGradientBrush>
      </Ellipse.Fill>
    </Ellipse>
    <Canvas.Triggers>
      <EventTrigger RoutedEvent="StackPanel.Loaded">
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimationUsingKeyFrames
                Storyboard.TargetName="ball2"
                Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:10"
                RepeatBehavior="Forever">
                <SplineDoubleKeyFrame Value="160"
                  KeyTime="0:0:5" KeySpline="0.25,0.5,0.75,1" />
                <SplineDoubleKeyFrame Value="310"
                  KeyTime="0:0:10" KeySpline="0.25,0.0 0.75,0.5" />
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </Canvas.Triggers>
  </Canvas>
</Window>

   
    
    
    
    
    
     


Repetition count

image_pdfimage_print


   
      

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

    <Ellipse Fill="Red" Width="200" Height="100">
      <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Ellipse.Loaded">
          <BeginStoryboard>
            <Storyboard>
    
                
                <ColorAnimation From="Red" To="Yellow" Duration="0:0:1"
                                Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
                                RepeatBehavior="3x" />
                
    
    
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Ellipse.Triggers>
    </Ellipse>

</Page>

   
    
    
    
    
    
     


Repetition duration

image_pdfimage_print


   
      

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

    <Ellipse Fill="Red" Width="200" Height="100">
      <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Ellipse.Loaded">
          <BeginStoryboard>
            <Storyboard>
    
                <DoubleAnimation By="20" Duration="0:0:0.25"
                                 Storyboard.TargetProperty="(Ellipse.Width)"
                                 RepeatBehavior="0:0:2" />
                
    
    
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Ellipse.Triggers>
    </Ellipse>

</Page>

   
    
    
    
    
    
     


Use ColorAnimationUsingKeyFrames to animate GradientStop

image_pdfimage_print


   
      

<Window x:Class="KeyFrameAnimation"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Key-Frame Animation" Height="200" Width="300">
  <StackPanel Margin="15">
    <TextBlock Name="label" Block.TextAlignment="Center" Foreground="Blue" />
    <Rectangle Name="rect" Width="200" Height="100" Stroke="Blue" Margin="10">
      <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
          <GradientStop Offset="0" />
          <GradientStop Offset="1" />
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <StackPanel.Triggers>
      <EventTrigger RoutedEvent="StackPanel.Loaded">
        <EventTrigger.Actions>
          <BeginStoryboard>
            <Storyboard>
              <ColorAnimationUsingKeyFrames
                Storyboard.TargetName="rect"
                Storyboard.TargetProperty="Fill.GradientStops&#91;0&#93;.Color"
                RepeatBehavior="Forever">
                <LinearColorKeyFrame Value="#FF00FF" KeyTime="0:0:0" />
                <LinearColorKeyFrame Value="#00805A" KeyTime="0:0:5" />
                <LinearColorKeyFrame Value="#FF0000" KeyTime="0:0:10" />
                <LinearColorKeyFrame Value="#0000FF" KeyTime="0:0:15" />
                <LinearColorKeyFrame Value="#00FFFF" KeyTime="0:0:20" />
                <LinearColorKeyFrame Value="#FF00FF" KeyTime="0:0:25" />
              </ColorAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger.Actions>
      </EventTrigger>
    </StackPanel.Triggers>
  </StackPanel>
</Window>