Velocity animation


   
  
<Page x:Class="Microsoft.Samples.PerFrameAnimations.FrameIndependentFollowExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Canvas x:Name="containerCanvas" Background="Transparent">
    <Rectangle x:Name="followRectangle" Canvas.Left="0" Canvas.Top="0" 
      Fill="red" Width="50" Height="50" />
  </Canvas>
</Page>
//File:Window.xaml.cs


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Media;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Media.Animation;

namespace Microsoft.Samples.PerFrameAnimations
{
    public partial class FrameIndependentFollowExample : Page
    {
        private Vector _rectangleVelocity = new Vector(0, 0);
        private Point _lastMousePosition = new Point(500, 500);

        private TimeSpan _lastRender;

        public FrameIndependentFollowExample(): base()
        {
            _lastRender = TimeSpan.FromTicks(DateTime.Now.Ticks);
            CompositionTarget.Rendering += UpdateRectangle;
        }

        private void UpdateRectangle(object sender, EventArgs e)
        {
            RenderingEventArgs renderArgs = (RenderingEventArgs)e;
            Double deltaTime = (renderArgs.RenderingTime - _lastRender).TotalSeconds;
            _lastRender = renderArgs.RenderingTime;

            Point location = new Point(0,0);

            Vector toMouse = _lastMousePosition - location;

            double followForce = 1.00;
            _rectangleVelocity += toMouse * followForce;

            double drag = 0.9;
            _rectangleVelocity *= drag;

            location += _rectangleVelocity * deltaTime;

            Canvas.SetLeft(followRectangle, location.X);
            Canvas.SetTop(followRectangle, location.Y);
        }
    }
}

   
    
     


Animation In Code


   
  

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:d="http://schemas.microsoft.com/expression/interactivedesigner/2006"
  mc:Ignorable="d" Background="#FFFFFFFF" x:Name="DocumentRoot"
  x:Class="AnimationExamples.AnimationInCode" Width="640" Height="480">
  <Grid.Resources>
    <Storyboard x:Key="OnLoaded"/>
  </Grid.Resources>

  <Grid.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
      <BeginStoryboard x:Name="OnLoaded_BeginStoryboard" Storyboard="{DynamicResource OnLoaded}"/>
    </EventTrigger>
  </Grid.Triggers>
  
  <Grid.ColumnDefinitions>
    <ColumnDefinition/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition/>
  </Grid.RowDefinitions>
  <Slider d:LayoutOverrides="Width, Height" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,212,87" Width="105" Height="33" x:Name="WidthControl" Maximum="100" Minimum="0"/>
  <Label d:LayoutOverrides="Width, Height" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="208,0,0,97.893333333333" Width="100" Height="23.2766666666667" x:Name="ContentLabel" Content="Circle Opacity:" RenderTransformOrigin="0.5,0.5" TabIndex="4"/>
  <Ellipse Stroke="{x:Null}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="228,163,233,138" Width="Auto" Height="Auto" x:Name="MyControl">
    <Ellipse.Fill>
      <RadialGradientBrush>
        <GradientStop Color="#FFFFFFFF" Offset="0"/>
        <GradientStop Color="#FF87001C" Offset="0.73735921399473"/>
        <GradientStop Color="#FF4C000F" Offset="1"/>
      </RadialGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
</Grid>
//File:Window.xaml.cs
using System;
using System.IO;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace AnimationExamples
{
  public partial class AnimationInCode
  {
    public AnimationInCode()
    {
      this.InitializeComponent();
    }
    
    protected override void OnInitialized(EventArgs e)
    {
      base.OnInitialized(e);
      
      DoubleCollection tickMarks = new DoubleCollection();
      tickMarks.Add(0);
      tickMarks.Add(100);
      
      this.WidthControl.Ticks = tickMarks;
      this.WidthControl.TickPlacement = TickPlacement.BottomRight;
      this.WidthControl.AutoToolTipPlacement = AutoToolTipPlacement.TopLeft;
        this.WidthControl.AutoToolTipPrecision = 0;
      this.WidthControl.Value = this.WidthControl.Maximum;
      this.WidthControl.PreviewMouseUp += new MouseButtonEventHandler(WidthControl_MouseUp);
    }

    private void WidthControl_MouseUp(object sender, MouseButtonEventArgs e)
    {
      DoubleAnimation moveAnimation = new DoubleAnimation();
      moveAnimation.From = this.MyControl.Opacity;
      moveAnimation.To = this.WidthControl.Value / this.WidthControl.Maximum;
      moveAnimation.Duration = new Duration(TimeSpan.FromSeconds(.5));
      moveAnimation.DecelerationRatio = .5;
      
      MyControl.BeginAnimation(Shape.OpacityProperty, moveAnimation);
    }
  }
}

   
    
     


A Simple Animation in Code


   
  

<Window x:Class="WpfApplication1.SimpleAnimation" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        Title="Simple Animation Example" Height="300" Width="300"> 
    <Canvas>
        <Rectangle x:Name="rect1" Width="100" Height="50" Fill="Blue"/> 
    </Canvas> 
</Window> 
//File:Window.xaml.cs

using System; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Media; 
using System.Windows.Shapes; 
using System.Windows.Media.Animation; 


namespace WpfApplication1 
{ 
    public partial class SimpleAnimation : Window 
    { 
        public SimpleAnimation() 
        { 
            InitializeComponent(); 
            DoubleAnimation da = new DoubleAnimation(); 
            da.From = 0; 
            da.To = 200; 
            da.Duration = TimeSpan.FromSeconds(5); 
            da.AutoReverse = true; 
            da.RepeatBehavior = RepeatBehavior.Forever; 
            rect1.BeginAnimation(Canvas.LeftProperty, da); 
            rect1.BeginAnimation(Canvas.TopProperty, da); 
        } 
    } 
} 

   
    
     


Remove Animations with AnimationClock


   
  

<Window x:Class="WpfApplication1.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="" Height="300" Width="300">
  <Window.Resources>
    <Storyboard x:Key="Storyboard1">
      <ParallelTimeline>
        <DoubleAnimation x:Name="Animation1" Storyboard.TargetProperty="Width" From="140" To="50"
          AutoReverse="True" RepeatBehavior="Forever" />
        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.5" AutoReverse="True" RepeatBehavior="Forever" />
      </ParallelTimeline>
    </Storyboard>
  </Window.Resources>

  <UniformGrid>
    <Button x:Name="button3" Content="Method 3" Click="Button3_Click" Loaded="Button3_Loaded" />
  </UniformGrid>
</Window>
//File:Window.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

namespace WpfApplication1
{
    public partial class Window1 : Window
    {
        private AnimationClock opacityClock;
        private AnimationClock widthClock;
        public Window1()
        {
            InitializeComponent();
        }

        private void Button3_Loaded(object sender, RoutedEventArgs e)
        {
            DoubleAnimation opacityAnimation = new DoubleAnimation(1d, 0.5d, TimeSpan.FromSeconds(1), FillBehavior.HoldEnd);
            opacityAnimation.RepeatBehavior = RepeatBehavior.Forever;
            opacityAnimation.AutoReverse = true;
            opacityClock = opacityAnimation.CreateClock();
            button3.ApplyAnimationClock(Button.OpacityProperty, opacityClock);

            DoubleAnimation widthAnimation = new DoubleAnimation(140d, 50d, TimeSpan.FromSeconds(1), FillBehavior.HoldEnd);
            widthAnimation.RepeatBehavior = RepeatBehavior.Forever;
            widthAnimation.AutoReverse = true;
            widthClock = widthAnimation.CreateClock();
            button3.ApplyAnimationClock(Button.WidthProperty, widthClock);
        }
        private void Button3_Click(object sender, RoutedEventArgs e)
        {
            opacityClock.Controller.Remove();
            widthClock.Controller.Remove();
        }        
    }
}

   
    
     


Remove Animations


   
  

<Window x:Class="WpfApplication1.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="" Height="300" Width="300">
  <Window.Resources>
    <Storyboard x:Key="Storyboard1">
      <ParallelTimeline>
        <DoubleAnimation x:Name="Animation1" Storyboard.TargetProperty="Width" From="140" To="50"
          AutoReverse="True" RepeatBehavior="Forever" />
        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.5" AutoReverse="True" RepeatBehavior="Forever" />
      </ParallelTimeline>
    </Storyboard>
  </Window.Resources>

  <UniformGrid>
    <Button Margin="5" Content="Method 2" Click="MyClick">
      <Button.Triggers>
        <EventTrigger
          RoutedEvent="Button.Loaded">
          <BeginStoryboard Storyboard="{DynamicResource Storyboard1}" />
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </UniformGrid>
</Window>
//File:Window.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

namespace WpfApplication1
{
    public partial class Window1 : Window
    {
        private AnimationClock opacityClock;
        private AnimationClock widthClock;
        public Window1()
        {
            InitializeComponent();
        }

        private void MyClick(object sender, RoutedEventArgs e)
        {
            Button button2 = sender as Button;
            button2.BeginAnimation(Button.WidthProperty, null);
            button2.BeginAnimation(Button.OpacityProperty, null);
        }
    }
}

   
    
     


Control the Progress of an Animation


   
  

<Window x:Class="WpfApplication1.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="" Height="300" Width="600">
    <Grid>
        <Rectangle x:Name="Rectangle" Height="100" Width="100" Fill="Firebrick">
            <Rectangle.RenderTransform>
                <MatrixTransform x:Name="RectangleMatrixTransform" />
            </Rectangle.RenderTransform>

            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Rectangle.Loaded">
                    <BeginStoryboard x:Name="RectangleStoryboard">
                        <Storyboard x:Name="Storyboard" CurrentTimeInvalidated="Storyboard_Changed">
                            <MatrixAnimationUsingPath Storyboard.TargetName="RectangleMatrixTransform" Storyboard.TargetProperty="Matrix" Duration="0:0:10"
                RepeatBehavior="Forever">
                                <MatrixAnimationUsingPath.PathGeometry>
                                    <PathGeometry Figures="M -100,0 300, 0" />
                                </MatrixAnimationUsingPath.PathGeometry>
                            </MatrixAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
        </Rectangle>

        <Slider x:Name="Seeker" Minimum="0" Maximum="1" SmallChange="0.001" ValueChanged="Seeker_ValueChanged">
            <Slider.Triggers>
                <EventTrigger RoutedEvent="Slider.MouseLeftButtonDown">
                    <StopStoryboard BeginStoryboardName="RectangleStoryboard" />
                </EventTrigger>
                <EventTrigger RoutedEvent="Slider.MouseLeftButtonUp">
                    <ResumeStoryboard BeginStoryboardName="RectangleStoryboard" />
                </EventTrigger>
            </Slider.Triggers>
        </Slider>
    </Grid>
</Window>

//File:Window.xaml.cs
using System;
using System.Windows;
using System.Windows.Media.Animation;
using System.Windows.Input;

namespace WpfApplication1
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }
        private void Storyboard_Changed(object sender, System.EventArgs e)
        {
            ClockGroup clockGroup = sender as ClockGroup;
            AnimationClock animationClock = clockGroup.Children[0] as AnimationClock;
            if (animationClock.CurrentProgress.HasValue)
            {
                Seeker.Value = animationClock.CurrentProgress.Value;
            }
        }
        private void Seeker_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            Storyboard.Seek(Rectangle,
                            TimeSpan.FromTicks((long)(Storyboard.Children[0].Duration.TimeSpan.Ticks * Seeker.Value)),
                            TimeSeekOrigin.BeginTime);
        }
    }
}

   
    
     


Markup for navigation transition animations

   
  

<Window x:Class="AnimateNavigateTransitions.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="AnimateNavigateTransitions" Height="300" Width="300">
  <Window.Resources>
    <Storyboard x:Key="transitionAnimation" TargetName="transitionPlaceholder">
      <DoubleAnimation Storyboard.TargetProperty="Opacity"
                       From="1" To="0" DecelerationRatio="1"
                       Duration="0:0:0.4" />
    </Storyboard>
  </Window.Resources>

  <StackPanel>
    <Frame Name="mainFrame" Source="Page1.xaml" />
    <Canvas Name="transitionPlaceholder" IsHitTestVisible="False" />
  </StackPanel>
</Window>
//File:Window.xaml.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
using System.Windows.Navigation;
using System.Windows.Media.Animation;


namespace AnimateNavigateTransitions
{
    public partial class Window1 : System.Windows.Window
    {
        VisualBrush lastPageBrush;
        public Window1()
        {
            InitializeComponent();
            mainFrame.Navigating += new System.Windows.Navigation.NavigatingCancelEventHandler(mainFrame_Navigating);
            mainFrame.Navigated += new NavigatedEventHandler(mainFrame_Navigated);
        }
        void mainFrame_Navigating(object sender, NavigatingCancelEventArgs e)
        {
            Page lastPage = mainFrame.Content as Page;
            if (lastPage == null){
                lastPageBrush = null;
               return;
            }
            lastPageBrush = new VisualBrush(lastPage);
            lastPageBrush.Viewbox = new Rect(0, 0, lastPage.ActualWidth,lastPage.ActualHeight);
            lastPageBrush.ViewboxUnits = BrushMappingMode.Absolute;
            lastPageBrush.Stretch = Stretch.None;

            Point pageOffset = lastPage.TransformToVisual(this).Transform(new Point());
            transitionPlaceholder.Margin = new Thickness(pageOffset.X, pageOffset.Y,0, 0);
        }
        void mainFrame_Navigated(object sender, NavigationEventArgs e)
        {
            if (lastPageBrush == null){
               return ;
            }    
            transitionPlaceholder.Background = lastPageBrush;
            lastPageBrush = null;
            Storyboard sb = (Storyboard) FindResource("transitionAnimation");
            sb.Begin(this);
        }
    }
}