Opacity Animation




//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.Shapes;
using System.Windows.Media.Animation;

namespace _360Timer
{

public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();

this.Show();

for (int i = 0; i < 24; ++i) { Ellipse e = new Ellipse(); e.Stroke = new SolidColorBrush(Color.FromArgb(5, 2, 200, 100)); e.StrokeThickness = 20; e.Width = 10.0; e.Height = 20.0; this.MainCanvas.Children.Add(e); e.SetValue(Canvas.LeftProperty, 300); e.SetValue(Canvas.TopProperty, 400); double duration = 6.0 ; double delay = 1.0 ; DoubleAnimation opacityAnimation = new DoubleAnimation(duration-1.0, 0.0, new Duration(TimeSpan.FromSeconds(duration))); opacityAnimation.BeginTime = TimeSpan.FromSeconds(delay); opacityAnimation.RepeatBehavior = RepeatBehavior.Forever; e.BeginAnimation(Ellipse.OpacityProperty, opacityAnimation); } } } } [/csharp]

Width and Height animation




//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.Shapes;
using System.Windows.Media.Animation;

namespace _360Timer
{

public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();

this.Show();

for (int i = 0; i < 24; ++i) { Ellipse e = new Ellipse(); e.Stroke = new SolidColorBrush(Color.FromArgb(5, 2, 200, 100)); e.StrokeThickness = 20; e.Width = 10.0; e.Height = 20.0; this.MainCanvas.Children.Add(e); e.SetValue(Canvas.LeftProperty, 300); e.SetValue(Canvas.TopProperty, 400); double duration = 6.0 ; double delay = 1.0 ; DoubleAnimation sizeAnimation = new DoubleAnimation(0.0, 512.0, new Duration(TimeSpan.FromSeconds(duration))); sizeAnimation.RepeatBehavior = RepeatBehavior.Forever; sizeAnimation.BeginTime = TimeSpan.FromSeconds(delay); e.BeginAnimation(Ellipse.WidthProperty, sizeAnimation); e.BeginAnimation(Ellipse.HeightProperty, sizeAnimation); } } } } [/csharp]

Timer triggered Animation


   
  

<Window x:Class="WpfApplication1.PerFrameAnimation"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Per Frame Animation" Height="400" Width="400">
    <Canvas>
        <Path Fill="Blue">
            <Path.Data>
                <EllipseGeometry x:Name="ball1" Center="30,180" RadiusX="5" RadiusY="5" />
            </Path.Data>
        </Path>

        <Path Stroke="LightBlue">
            <Path.Data>
                <EllipseGeometry Center="180,180" RadiusX="150" RadiusY="75" />
            </Path.Data>
        </Path>

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

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

namespace WpfApplication1
{
    public partial class PerFrameAnimation : Window
    {
        private TimeSpan lastRender;
        double time = 0;
        double dt = 0;
        public PerFrameAnimation()
        {
            lastRender = TimeSpan.FromTicks(DateTime.Now.Ticks);
            CompositionTarget.Rendering += StartAnimation;
        }
        private void StartAnimation(object sender, EventArgs e)
        {
            RenderingEventArgs renderArgs = (RenderingEventArgs)e;
            dt = (renderArgs.RenderingTime - lastRender).TotalSeconds;
            lastRender = renderArgs.RenderingTime;
            double x = 180 + 150 * Math.Cos(2 * time);
            double y = 180 + 75 * Math.Sin(2 * time);
            ball1.Center = new Point(x, y);

            time += dt; 
        }
    }
}

   
    
     


Path animation by code, duration, RepeatBehavior


   
  

<Window x:Class="WpfApplication1.PathAnimationExample"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Path Animation" Height="500" Width="518">
    <Canvas Margin="5">
        <Path Stroke="LightBlue">
            <Path.Data>
                <PathGeometry x:Name="path1"
          Figures="M10,10 C75,20 300,20 200,120 220,220 300,220 350, 400 325,20 220,20 200,120 175,220 75,200 50,120" />
            </Path.Data>
        </Path>
        <Path Stroke="DarkGoldenrod">
            <Path.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="Gold" Offset="0" />
                    <GradientStop Color="DarkGoldenrod" Offset="1" />
                </RadialGradientBrush>
            </Path.Fill>
            <Path.Data>
                <EllipseGeometry x:Name="circle1" Center="50,120" RadiusX="10" RadiusY="10" />
            </Path.Data>
        </Path>

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

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

namespace WpfApplication1
{
    public partial class PathAnimationExample : Window
    {
        public PathAnimationExample()
        {
            InitializeComponent();
            path1.Freeze(); // For performance benefits. 
            PointAnimationUsingPath pa = new PointAnimationUsingPath();
            pa.PathGeometry = path1;
            pa.Duration = TimeSpan.FromSeconds(5);
            pa.RepeatBehavior = RepeatBehavior.Forever;
            circle1.BeginAnimation(EllipseGeometry.CenterProperty, pa);


        }
    }
}

   
    
     


Rolling Ball Animation


   
  

<Window x:Class="WpfApplication1.RollingBall"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Rolling Balls" Height="350" Width="518">
  <Border BorderBrush="Gray" BorderThickness="1" Margin="4">
    <Canvas>
      <Rectangle Fill="Gray" Width="500" Height="5"
        Canvas.Top="60" />
      <Ellipse x:Name="ellipse1" Width="50" Height="50"
        Stroke="Blue" Canvas.Top="10" Canvas.Left="0">
        <Ellipse.Fill>
          <LinearGradientBrush>
            <GradientStop Color="Blue" Offset="0.2" />
            <GradientStop Color="LightBlue" Offset="0.8" />
          </LinearGradientBrush>
        </Ellipse.Fill>
        <Ellipse.RenderTransform>
          <RotateTransform x:Name="ellipse1Rotate"
            CenterX="25" CenterY="25" />
        </Ellipse.RenderTransform>
      </Ellipse>


      <Rectangle Fill="Gray" Width="500" Height="5"
        Canvas.Top="130" />

      <Ellipse x:Name="ellipse2" Width="50" Height="50"
        Stroke="Red" Canvas.Top="80" Canvas.Left="0">
        <Ellipse.Fill>
          <LinearGradientBrush>
            <GradientStop Color="Red" Offset="0.8" />
            <GradientStop Color="LightSalmon" Offset="0.2" />
          </LinearGradientBrush>
        </Ellipse.Fill>
        <Ellipse.RenderTransform>
          <RotateTransform x:Name="ellipse2Rotate"
            CenterX="25" CenterY="25" />
        </Ellipse.RenderTransform>
      </Ellipse>
      <Rectangle Fill="Gray" Width="500" Height="5"
        Canvas.Top="200" />
      <Ellipse x:Name="ellipse3" Width="50" Height="50"
        Stroke="Green" Canvas.Top="150" Canvas.Left="0">
        <Ellipse.Fill>
          <LinearGradientBrush>
            <GradientStop Color="Green" Offset="0.5" />
            <GradientStop Color="LightGreen" Offset="0.5" />
          </LinearGradientBrush>
        </Ellipse.Fill>
        <Ellipse.RenderTransform>
          <RotateTransform x:Name="ellipse3Rotate"
            CenterX="25" CenterY="25" />
        </Ellipse.RenderTransform>
      </Ellipse>
      <Rectangle Fill="Gray" Width="500" Height="5" Canvas.Top="270" />
      <Ellipse x:Name="ellipse4" Width="50" Height="50" Stroke="Purple" Canvas.Top="220" Canvas.Left="0">
        <Ellipse.Fill>
          <LinearGradientBrush>
            <GradientStop Color="Purple" Offset="0.5" />
            <GradientStop Color="LightPink" Offset="0.2" />
          </LinearGradientBrush>
        </Ellipse.Fill>
        <Ellipse.RenderTransform>
          <RotateTransform x:Name="ellipse4Rotate" CenterX="25" CenterY="25" />
        </Ellipse.RenderTransform>
      </Ellipse>
    </Canvas>
  </Border>
</Window>
//File:Window.xaml.cs


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


namespace WpfApplication1
{
    public partial class RollingBall : Window
    {


        public RollingBall()
        {
            InitializeComponent();
            double nRotation = 2;

            DoubleAnimation da = new DoubleAnimation(0, 450,TimeSpan.FromSeconds(5));
            da.RepeatBehavior = RepeatBehavior.Forever;
            da.AutoReverse = true;
            ellipse1.BeginAnimation(Canvas.LeftProperty, da);


            da = new DoubleAnimation(0, nRotation,TimeSpan.FromSeconds(15));
            da.RepeatBehavior = RepeatBehavior.Forever;
            da.AutoReverse = true;
            ellipse1Rotate.BeginAnimation(RotateTransform.AngleProperty, da);


            da = new DoubleAnimation(0, 450,TimeSpan.FromSeconds(15));
            da.AccelerationRatio = 0.4;
            da.RepeatBehavior = RepeatBehavior.Forever;
            da.AutoReverse = true;
            ellipse2.BeginAnimation(Canvas.LeftProperty, da);


            da = new DoubleAnimation(0, nRotation,TimeSpan.FromSeconds(15));
            da.AccelerationRatio = 0.4;
            da.RepeatBehavior = RepeatBehavior.Forever;
            da.AutoReverse = true;
            ellipse2Rotate.BeginAnimation(RotateTransform.AngleProperty, da);


            da = new DoubleAnimation(0, 450,TimeSpan.FromSeconds(5));
            da.DecelerationRatio = 0.6;
            da.RepeatBehavior = RepeatBehavior.Forever;
            da.AutoReverse = true;
            ellipse3.BeginAnimation(Canvas.LeftProperty, da);


            da = new DoubleAnimation(0, nRotation,TimeSpan.FromSeconds(15));
            da.DecelerationRatio = 0.6;
            da.RepeatBehavior = RepeatBehavior.Forever;
            da.AutoReverse = true;
            ellipse3Rotate.BeginAnimation(RotateTransform.AngleProperty, da);

        }
    }
}

   
    
     


Show a Continuous Animation During an Asynchronous Process





















Receive Notification When an Animation Completes


   
  
<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" Background="Black">
  <Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
      <BeginStoryboard>
        <Storyboard Completed="Storyboard_Completed">
          <ParallelTimeline Completed="ParallelTimeline_Completed">
            <ColorAnimation Duration="0:0:1" Completed="Animation1_Completed" Storyboard.TargetProperty="Background.Color" To="White" />
            <ColorAnimation Duration="0:0:2" Completed="Animation2_Completed" Storyboard.TargetName="bd" Storyboard.TargetProperty="Background.(SolidColorBrush.Color)" To="Black" />
          </ParallelTimeline>
          <ColorAnimation Duration="0:0:3" Completed="Animation3_Completed" Storyboard.TargetName="rect" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" To="Firebrick" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Window.Triggers>
  <Border x:Name="bd" Margin="20" Background="HotPink">
    <Rectangle x:Name="rect" Width="100" Height="100" Fill="WhiteSmoke" />
  </Border>

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

using System;
using System.Windows;

namespace WpfApplication1
{
    public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void Storyboard_Completed(object sender, EventArgs e)
        {
            MessageBox.Show("Storyboard complete.", "WpfApplication1");
        }

        private void ParallelTimeline_Completed(object sender, EventArgs e)
        {
            MessageBox.Show("ParallelTimeline complete.", "WpfApplication1");
        }

        private void Animation1_Completed(object sender, EventArgs e)
        {
            MessageBox.Show("Animation 1 complete.", "WpfApplication1");
        }

        private void Animation2_Completed(object sender, EventArgs e)
        {
            MessageBox.Show("Animation 2 complete.", "WpfApplication1");
        }

        private void Animation3_Completed(object sender, EventArgs e)
        {
            MessageBox.Show("Animation 3 complete.", "WpfApplication1");
        }
    }
}