Como: Animar uma Geometria de Retângulo Usando Quadros-Chave
Este exemplo demonstra como animar a propriedade Rect de uma RectangleGeometry utilizando chave de quadros.
Exemplo
O exemplo seguinte usa a classe RectAnimationUsingKeyFrames para animar a propriedade Rect de uma RectangleGeometry. Essa animação usa três quadros de chave da seguinte maneira:
Durante os primeiros dois segundos, usa uma instância da classe LinearRectKeyFrame para animar uma alteração gradual na posição, largura e altura de um retângulo. Quadros-chave lineares como LinearRectKeyFrame criam uma transição linear suave entre valores.
Durante o final do próximo meio segundo, usa uma instância da classe DiscreteRectKeyFrame para subitamente diminuir a altura do retângulo. Quadros chave discretos, tais como DiscreteRectKeyFrame, criam alterações súbitas entre os valores, ou seja, a redução de altura ocorre rapidamente e é não sutil.
Durante os últimos dois segundos, usa uma instância da classe SplineRectKeyFrame para alterar o retângulo de volta para sua posição e tamanho original. Quadros de chave de Spline como SplineRectKeyFrame criam transições variáveis entre valores de acordo com os valores da propriedade KeySpline. Nesse exemplo, a alteração começa lentamente e acelera exponencialmente conforme se aproxima do fim do segmento tempo.
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="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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 Exemplo de animação KeyFrame.
Consulte também
Tarefas
Conceitos
Visão geral de animações de Quadro-Chave