Animation with a slow 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="rect3" Fill="Blue" 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="rect3" Storyboard.TargetProperty="Width"

                  From="20" To="400" Duration="0:0:10" SpeedRatio="0.5" />



              </Storyboard>

            </BeginStoryboard>

          </EventTrigger.Actions>

        </EventTrigger>

      </Button.Triggers>

    </Button>

  </StackPanel>

</Window>

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>