Export (0) Print
Expand All
This topic has not yet been rated - Rate this topic

RectAnimationUsingKeyFrames Class

Animates the value of a property that takes a Rect along a set of key frames.

Namespace:  System.Windows.Media.Animation
Assembly:  PresentationCore (in PresentationCore.dll)
XMLNS for XAML: http://schemas.microsoft.com/winfx/2006/xaml/presentation, http://schemas.microsoft.com/netfx/2007/xaml/presentation
[ContentPropertyAttribute("KeyFrames")]
public class RectAnimationUsingKeyFrames : RectAnimationBase, 
	IKeyFrameAnimation, IAddChild
<RectAnimationUsingKeyFrames>
  KeyFrames
</RectAnimationUsingKeyFrames>

A key frame animation's target values are defined by its KeyFrames property, which contains a collection of RectKeyFrame objects. Each RectKeyFrame defines a segment of the animation with its own target Value and KeyTime. When the animation runs, it progresses from one key value to the next at the specified key times.

There are three types of RectKeyFrame classes, one for each supported interpolation method: LinearRectKeyFrame, DiscreteRectKeyFrame, and SplineRectKeyFrame.

Unlike a RectAnimation, a RectAnimationUsingKeyFrames can have more than two target values. You can also control the interpolation method of individual RectKeyFrame segments.

This example shows how to animate the Rect property of a RectangleGeometry by using key frames.

The following example uses the RectAnimationUsingKeyFrames class to animate the Rect property of a RectangleGeometry. This animation uses three key frames in the following manner:

  1. During the first two seconds, uses an instance of the LinearRectKeyFrame class to animate a gradual change in the position, width, and height of a rectangle. Linear key frames like LinearRectKeyFrame create a smooth linear transition between values.

  2. During the end of the next half second, uses an instance of the DiscreteRectKeyFrame class to suddenly decrease the height of the rectangle. Discrete key frames like DiscreteRectKeyFrame create sudden changes between values, that is, the decrease in height occurs quickly and is not subtle.

  3. During the final two seconds, uses an instance of the SplineRectKeyFrame class to change the rectangle back to its original size and position. Spline key frames like SplineRectKeyFrame create a variable transition between values according to the values of the KeySpline property. In this example, the change begins slowly and speeds up exponentially toward the end of the time segment.

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

namespace Microsoft.Samples.KeyFrameExamples
{
    /// <summary> 
    /// This example shows how to use the RectAnimationUsingKeyFrames class to 
    /// animate the position and size of a rectangle. 
    /// Key frame animations enable you to create complex animations  
    /// by specifying multiple destination values 
    /// and controlling the animation's interpolation method. 
    /// </summary> 
    public class RectAnimationUsingKeyFramesExample : Page
    {
        public RectAnimationUsingKeyFramesExample()
        {
            Title = "RectAnimationUsingKeyFrames Example";
            Background = Brushes.White;
            Margin = new Thickness(20);

            // Create a NameScope for this page so that 
            // Storyboards can be used.
            NameScope.SetNameScope(this, new NameScope());

            StackPanel myStackPanel = new StackPanel();
            myStackPanel.Orientation = Orientation.Vertical;
            myStackPanel.HorizontalAlignment = HorizontalAlignment.Center;

            //Add the Path Element
            Path myPath = new Path();
            myPath.Stroke = Brushes.Black;
            myPath.Fill = Brushes.LemonChiffon;
            myPath.StrokeThickness = 1;

            // Create a RectangleGeometry to specify the Path data.
            RectangleGeometry myRectangleGeometry = new RectangleGeometry();
            myRectangleGeometry.Rect = new Rect(0, 200, 100, 100);
            myPath.Data = myRectangleGeometry;

            myStackPanel.Children.Add(myPath);

            // Assign the TranslateTransform a name so that 
            // it can be targeted by a Storyboard. 
            this.RegisterName(
                "AnimatedRectangleGeometry", myRectangleGeometry);

            // Create a RectAnimationUsingKeyFrames to 
            // animate the RectangleGeometry.
            RectAnimationUsingKeyFrames rectAnimation 
                = new RectAnimationUsingKeyFrames();
            rectAnimation.Duration = TimeSpan.FromSeconds(6);

            // Set the animation to repeat forever. 
            rectAnimation.RepeatBehavior = RepeatBehavior.Forever;

            // Animate position, width, and height in first 2 seconds. LinearRectKeyFrame creates 
            // a smooth, linear animation between values.
            rectAnimation.KeyFrames.Add(
                new LinearRectKeyFrame(
                    new Rect(600,50,200,50), // Target value (KeyValue)
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2))) // KeyTime
                );

            // In the next half second, change height to 10. DiscreteRectKeyFrame creates a  
            // sudden "jump" between values.
            rectAnimation.KeyFrames.Add(
                new DiscreteRectKeyFrame(
                    new Rect(600, 50, 200, 10), // Target value (KeyValue)
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(2.5))) // KeyTime
                );

            // In the final 2 seconds of the animation, go back to the starting position, width, and height.   
            // Spline key frames like SplineRectKeyFrame creates a variable transition between values depending  
            // on the KeySpline property. In this example, the animation starts off slow but toward the end of  
            // the time segment, it speeds up exponentially.
            rectAnimation.KeyFrames.Add(
                new SplineRectKeyFrame(
                    new Rect(0, 200, 100, 100), // Target value (KeyValue)
                    KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4.5)), // KeyTime 
                    new KeySpline(0.6, 0.0, 0.9, 0.0) // KeySpline
                    )
                );

            // Set the animation to target the Rect property 
            // of the object named "AnimatedRectangleGeometry."
            Storyboard.SetTargetName(rectAnimation, "AnimatedRectangleGeometry");
            Storyboard.SetTargetProperty(
                rectAnimation, new PropertyPath(RectangleGeometry.RectProperty));

            // Create a storyboard to apply the animation.
            Storyboard rectStoryboard = new Storyboard();
            rectStoryboard.Children.Add(rectAnimation);

            // Start the storyboard after the rectangle loads.
            myPath.Loaded += delegate(object sender, RoutedEventArgs e)
            {
                rectStoryboard.Begin(this);
            };

            Content = myStackPanel;
        }

    }
}
<Page  
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="ThicknessAnimationUsingKeyFrames Example">

  <StackPanel Orientation="Vertical" HorizontalAlignment="Center">

    <Path Stroke="Black" StrokeThickness="1" Fill="LemonChiffon">
      <Path.Data>
        <RectangleGeometry x:Name="myRectangleGeometry" Rect="0,200,100,100" />
      </Path.Data>
      <Path.Triggers>
        <EventTrigger RoutedEvent="Path.Loaded">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animate the Rect property of the RectangleGeometry which causes the
              rectangle to animate its position as well as its width and height. -->
              <RectAnimationUsingKeyFrames
                Storyboard.TargetName="myRectangleGeometry"
                Storyboard.TargetProperty ="Rect"
                Duration="0:0:6" FillBehavior="HoldEnd" RepeatBehavior="Forever">

                <!-- Animate position, width, and height in first 2 seconds. LinearRectKeyFrame creates
                a smooth, linear animation between values. -->
                <LinearRectKeyFrame Value="600,50,200,50" KeyTime="0:0:2" />

                <!-- In the next half second, change height to 10. DiscreteRectKeyFrame creates a 
                sudden "jump" between values. -->
                <DiscreteRectKeyFrame Value="600,50,200,10" KeyTime="0:0:2.5" />

                <!-- In the final 2 seconds of the animation, go back to the starting position, width, and height.  
                Spline key frames like SplineRectKeyFrame creates a variable transition between values depending 
                on the KeySpline property. In this example, the animation starts off slow but toward the end of 
                the time segment, it speeds up exponentially.-->
                <SplineRectKeyFrame Value="0,200,100,100" KeyTime="0:0:4.5" KeySpline="0.6,0.0 0.9,0.00"  />
              </RectAnimationUsingKeyFrames>
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Path.Triggers>
    </Path>

  </StackPanel>
</Page>

For the complete sample, see KeyFrame Animation Sample.

Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.

Windows 7, Windows Vista, Windows XP SP2, Windows Server 2008 R2, Windows Server 2008, Windows Server 2003

The .NET Framework and .NET Compact Framework do not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.

.NET Framework

Supported in: 3.5, 3.0
Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.