Animation with a fast speed


   
     

<Window x:Class="AnimationSpeed"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Animation Speed Example" Height="240" Width="410">

    <StackPanel Margin="5">

    <Rectangle Name="rect2" Fill="Green" Margin="2" Width="20"
      Height="20" HorizontalAlignment="Left" />
    <Button Margin="2,20,0,0" HorizontalAlignment="Left"
      Content="Start Animations" Width="100">
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>

                <DoubleAnimation
                  Storyboard.TargetName="rect2" Storyboard.TargetProperty="Width"
                  From="20" To="400" Duration="0:0:10" SpeedRatio="1.5" />


              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </StackPanel>
</Window>






     


Animation without acceleration or deceleration


   
     

<Window x:Class="AnimationSpeed"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Animation Speed Example" Height="240" Width="410">

    <StackPanel Margin="5">
    <Rectangle Name="rect1" Fill="Red" Margin="2" Width="20" Height="20" HorizontalAlignment="Left" />
    <Button Margin="2,20,0,0" HorizontalAlignment="Left"
      Content="Start Animations" Width="100">
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>

                <DoubleAnimation
                  Storyboard.TargetName="rect1" Storyboard.TargetProperty="Width"
                  From="20" To="400" Duration="0:0:10" />

              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Button.Triggers>
    </Button>
  </StackPanel>
</Window>






     


Animation In Style


   
     
<Window x:Class="Animation.AnimationInStyle"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
    Title="AnimationInStyle" Height="300" Width="300">
  <Window.Resources>

    <Style x:Key="GrowButtonStyle">
      <Style.Triggers>
        <Trigger Property="Button.IsPressed" Value="True">
          <Trigger.EnterActions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation Storyboard.TargetProperty="Width"
                  To="250" Duration="0:0:5"></DoubleAnimation>
              </Storyboard>
            </BeginStoryboard>
          </Trigger.EnterActions>
        </Trigger>
      </Style.Triggers>      
    </Style>

  </Window.Resources>
  <Button Padding="10" Name="cmdGrow" Height="40" Width="160" Style="{StaticResource GrowButtonStyle}"
          HorizontalAlignment="Center" VerticalAlignment="Center">
      Click and Make Me Grow    
  </Button>
</Window>






     


Animate Opacity


   
     
<Window x:Class="Animation.AnimateVisual"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="AnimateVisualBrush" Height="300" Width="300" Background="LightGoldenrodYellow">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
      </Grid.RowDefinitions>

      <Button Name="visual" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button.Content>Test</Button.Content>
        <Button.Triggers>
          <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
              <Storyboard  RepeatBehavior="Forever">
                <DoubleAnimation Storyboard.TargetName="rectangle"
                                 Storyboard.TargetProperty="Opacity"
                                 To="0.1" Duration="0:0:4" AutoReverse="True"></DoubleAnimation>

              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Button.Triggers>
      </Button>
      
      <Rectangle Grid.Row="1" Name="rectangle" Width="100" Stretch="Uniform" ClipToBounds="False" RenderTransformOrigin="0.5,0.5">
        <Rectangle.Fill>
          <VisualBrush Visual="{Binding ElementName=visual}">
          </VisualBrush>
        </Rectangle.Fill>
      </Rectangle>
    </Grid>
  </Window>






     


Animate RenderTransform Angle


   
     
<Window x:Class="Animation.AnimateVisual"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="AnimateVisualBrush" Height="300" Width="300" Background="LightGoldenrodYellow">
    <Grid>
      <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
      </Grid.RowDefinitions>

      <Button Name="visual" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button.Content>Test</Button.Content>
        <Button.Triggers>
          <EventTrigger RoutedEvent="Button.Click">
            <BeginStoryboard>
              <Storyboard  RepeatBehavior="Forever">
                <DoubleAnimation Storyboard.TargetName="rectangle"
                                 Storyboard.TargetProperty="RenderTransform.Children&#91;0&#93;.AngleY"
                                 To="180" Duration="0:0:15" AutoReverse="True"></DoubleAnimation>
                <DoubleAnimation Storyboard.TargetName="rectangle"
                                 Storyboard.TargetProperty="RenderTransform.Children&#91;1&#93;.Angle"
                                 To="180" Duration="0:0:20" AutoReverse="True"></DoubleAnimation>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger>
        </Button.Triggers>
      </Button>
      
      <Rectangle Grid.Row="1" Name="rectangle" Width="100" Stretch="Uniform" ClipToBounds="False" RenderTransformOrigin="0.5,0.5">
        <Rectangle.Fill>
          <VisualBrush Visual="{Binding ElementName=visual}">
           
          </VisualBrush>
        </Rectangle.Fill>
        <Rectangle.RenderTransform>
          
            <TransformGroup>
              <SkewTransform CenterX="0.5"></SkewTransform>
              <RotateTransform CenterX="0.5" CenterY="0.5"></RotateTransform>
            </TransformGroup>
          
        </Rectangle.RenderTransform>
      </Rectangle>
    </Grid>
  </Window>






     


Animate RadialGradient


   
     
<Window x:Class="Animation.AnimateRadialGradient"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="AnimateRadialGradient" Height="300" Width="300">
  <Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <PointAnimationUsingKeyFrames Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Fill.GradientOrigin"
                                           RepeatBehavior="Forever" >
              <LinearPointKeyFrame Value="0.7,0.3" KeyTime="0:0:0"></LinearPointKeyFrame>
              <DiscretePointKeyFrame Value="0.3,0.7" KeyTime="0:0:25"></DiscretePointKeyFrame>
              <DiscretePointKeyFrame Value="0.5,0.9" KeyTime="0:0:28"></DiscretePointKeyFrame>
              <DiscretePointKeyFrame Value="0.7,0.3" KeyTime="0:0:24"></DiscretePointKeyFrame>
            </PointAnimationUsingKeyFrames>
            <ColorAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="Fill.GradientStops&#91;1&#93;.Color"
              To="Black"  Duration="0:0:10"
              AutoReverse="True" RepeatBehavior="Forever"></ColorAnimation>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Window.Triggers>
    <Grid>
      <Ellipse Name="ellipse" Margin="5" Grid.Row="1" Stretch="Uniform">
        <Ellipse.Fill>
          <RadialGradientBrush
             RadiusX="1" RadiusY="1" GradientOrigin="0.7,0.3">
            <GradientStop Color="White" Offset="0" ></GradientStop>
            <GradientStop Color="Blue" Offset="1" ></GradientStop>            
          </RadialGradientBrush>
        </Ellipse.Fill>
      </Ellipse>
    </Grid>
</Window>






     


Animation along a path


   
     

<Window x:Class="Animation.PathBasedAnimation"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="PathBasedAnimation" Height="400" Width="550">

    <Window.Resources>
        <PathGeometry x:Key="path">
            <PathFigure IsClosed="True">
                <ArcSegment Point="100,200" Size="15,10" SweepDirection="Clockwise"></ArcSegment>
                <ArcSegment Point="400,50" Size="5,5" ></ArcSegment>
                <ArcSegment Point="40,50" Size="5,5" ></ArcSegment>
            </PathFigure>
        </PathGeometry>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimationUsingPath Storyboard.TargetName="image"
                                      Storyboard.TargetProperty="(Canvas.Left)"
                                     PathGeometry="{StaticResource path}"
                                      Duration="0:0:5" RepeatBehavior="Forever" Source="X" />
                        <DoubleAnimationUsingPath Storyboard.TargetName="image"
                                      Storyboard.TargetProperty="(Canvas.Top)"
                                     PathGeometry="{StaticResource path}"
                                      Duration="0:0:5" RepeatBehavior="Forever" Source="Y" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Window.Triggers>
    <Canvas Margin="10">
        <Path Stroke="Red" StrokeThickness="1" Data="{StaticResource path}" Canvas.Top="10" Canvas.Left="10">
        </Path>
        <Rectangle Name="image" Width="10" Height="20" Stroke="Red">
        </Rectangle>
    </Canvas>
</Window>