Visão Geral de Animações de Caminho
Este tópico apresenta animações de caminho, que permitem que você use um caminho geométrico para gerar valores de saída. Animações de caminho são úteis para mover e girar objetos junto a caminhos complexos.
Este tópico contém as seguintes seções.
Pré-requisitos
Para entender esse tópico, você deve estar familiarizado com os recursos de animação de WPF. Para obter uma introdução a recursos de animação, consulte Revisão de Animação.
Porque você usa um objeto PathGeometry para definir uma animação de caminho, você também deve estar familiarizado com PathGeometry e os diferentes tipos de objetos PathSegment. Para obter mais informações, consulte o Visão Geral de Geometria.
O que é uma animação de caminho?
Uma animação de caminho é um tipo de AnimationTimeline que usa um PathGeometry como sua entrada. Em vez de configurar uma propriedade From, To, ou By (como faria para um De/Para/Por animação) ou usando quadros chaves (que você usa em uma animação de quadros chaves), você define um caminho geométrico e o usa para definir a propriedade PathGeometry da animação de caminho. Na medida em que a animação de caminho progride, ela lê informações de x, y e ângulo do caminho e usa essas informações para gerar a saída.
Animações de caminho são muito úteis para animar um objeto por um caminho complexo. Uma maneira para mover um objeto ao longo de um caminho é usar um MatrixTransform e um MatrixAnimationUsingPath para transformar um objeto ao longo de um caminho complexo. O exemplo a seguir demonstra essa técnica, usando o objeto MatrixAnimationUsingPath para animar a propriedade Matrix de um MatrixTransform. O MatrixTransform é aplicado a um botão e faz com que ele se mova ao longo de um caminho curvo. Porque a propriedade DoesRotateWithTangent está definida como true, o retângulo gira junto da tangente do caminho.
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:PresentationOptions="https://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="PresentationOptions" Margin="20">
<Canvas Width="400" Height="400">
<!-- The Button that is animated across the screen by animating
the MatrixTransform applied to the button. -->
<Button MinWidth="100" Content="A Button">
<Button.RenderTransform>
<MatrixTransform x:Name="ButtonMatrixTransform">
<MatrixTransform.Matrix >
<Matrix />
</MatrixTransform.Matrix>
</MatrixTransform>
</Button.RenderTransform>
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Loaded">
<BeginStoryboard>
<Storyboard>
<MatrixAnimationUsingPath
Storyboard.TargetName="ButtonMatrixTransform"
Storyboard.TargetProperty="Matrix"
DoesRotateWithTangent="True"
Duration="0:0:5"
RepeatBehavior="Forever" >
<MatrixAnimationUsingPath.PathGeometry>
<PathGeometry
Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100"
PresentationOptions:Freeze="True" />
</MatrixAnimationUsingPath.PathGeometry>
</MatrixAnimationUsingPath>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Canvas>
</Page>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace SDKSample
{
/// <summary>
/// Shows how to animate an object along
/// a geometric path.
/// </summary>
public class MatrixAnimationUsingPathDoesRotateWithTangentExample : Page
{
public MatrixAnimationUsingPathDoesRotateWithTangentExample()
{
this.Margin = new Thickness(20);
// Create a NameScope for the page so that
// we can use Storyboards.
NameScope.SetNameScope(this, new NameScope());
// Create a button.
Button aButton = new Button();
aButton.MinWidth = 100;
aButton.Content = "A Button";
// Create a MatrixTransform. This transform
// will be used to move the button.
MatrixTransform buttonMatrixTransform = new MatrixTransform();
aButton.RenderTransform = buttonMatrixTransform;
// Register the transform's name with the page
// so that it can be targeted by a Storyboard.
this.RegisterName("ButtonMatrixTransform", buttonMatrixTransform);
// Create a Canvas to contain the button
// and add it to the page.
// Although this example uses a Canvas,
// any type of panel will work.
Canvas mainPanel = new Canvas();
mainPanel.Width = 400;
mainPanel.Height = 400;
mainPanel.Children.Add(aButton);
this.Content = mainPanel;
// Create the animation path.
PathGeometry animationPath = new PathGeometry();
PathFigure pFigure = new PathFigure();
pFigure.StartPoint = new Point(10, 100);
PolyBezierSegment pBezierSegment = new PolyBezierSegment();
pBezierSegment.Points.Add(new Point(35, 0));
pBezierSegment.Points.Add(new Point(135, 0));
pBezierSegment.Points.Add(new Point(160, 100));
pBezierSegment.Points.Add(new Point(180, 190));
pBezierSegment.Points.Add(new Point(285, 200));
pBezierSegment.Points.Add(new Point(310, 100));
pFigure.Segments.Add(pBezierSegment);
animationPath.Figures.Add(pFigure);
// Freeze the PathGeometry for performance benefits.
animationPath.Freeze();
// Create a MatrixAnimationUsingPath to move the
// button along the path by animating
// its MatrixTransform.
MatrixAnimationUsingPath matrixAnimation =
new MatrixAnimationUsingPath();
matrixAnimation.PathGeometry = animationPath;
matrixAnimation.Duration = TimeSpan.FromSeconds(5);
matrixAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Set the animation's DoesRotateWithTangent property
// to true so that rotates the rectangle in addition
// to moving it.
matrixAnimation.DoesRotateWithTangent = true;
// Set the animation to target the Matrix property
// of the MatrixTransform named "ButtonMatrixTransform".
Storyboard.SetTargetName(matrixAnimation, "ButtonMatrixTransform");
Storyboard.SetTargetProperty(matrixAnimation,
new PropertyPath(MatrixTransform.MatrixProperty));
// Create a Storyboard to contain and apply the animation.
Storyboard pathAnimationStoryboard = new Storyboard();
pathAnimationStoryboard.Children.Add(matrixAnimation);
// Start the storyboard when the button is loaded.
aButton.Loaded += delegate(object sender, RoutedEventArgs e)
{
// Start the storyboard.
pathAnimationStoryboard.Begin(this);
};
}
}
}
Para obter mais informações sobre a sintaxe de caminho que é usada no XAML exemplo, consulte o Sintaxe de Marcação de Caminho Visão geral. Para exemplo completo, consulte Exemplo de animação do caminho.
Você pode aplicar uma animação de caminho a uma propriedade, usando um Storyboard no XAML e código, ou usando o método BeginAnimation no código. Você também pode usar uma animação de caminho para criar um AnimationClock e aplicá-lo a uma ou mais propriedades. Para obter mais informações sobre os diferentes métodos para aplicar as animações, consulte Visão geral de técnicas de animação de propriedades.
Tipo de Animação de Caminho
Como as animações geram valores de propriedade, existem tipos diferentes de animação para tipos diferentes de propriedades. Para animar uma propriedade que utiliza um Double, (tais como a propriedade X de um TranslateTransform), use uma animação que produz valores de Double. Para animar uma propriedade que utiliza um Point, use uma animação que produz valores Point, e assim por diante.
Classes de animação de caminho pertencem ao namespace System.Windows.Media.Animation e use a seguinte convenção de nomenclatura:
*<Type>*AnimationUsingPath
Onde <Type> é o tipo de valor que a classe anima.
WPF fornece a seguinte classes de animação de caminho.
Tipo de propriedade |
Classe de Animação de Caminho Correspondente |
Exemplo |
|---|---|---|
Como: Animar um objeto ao longo de uma trajetória (animação dupla) |
||
Como: Animar um objeto ao longo de uma trajetória (animação de pontos) |
||
Um MatrixAnimationUsingPath gera valores de Matrix a partir de sua PathGeometry. Quando usada com um MatrixTransform, um MatrixAnimationUsingPath pode mover um objeto ao longo de um caminho. Se você definir a propriedade DoesRotateWithTangent de MatrixAnimationUsingPath como true, ele também gira o objeto ao longo da curvas do caminho.
Um PointAnimationUsingPath gera valores de Point a partir de coordenadas x e y de seu PathGeometry. Usando um PointAnimationUsingPath para animar uma propriedade que utiliza valores Point, você pode mover um objeto por um caminho. Um PointAnimationUsingPath não pode girar objetos.
Um DoubleAnimationUsingPath gera valores de Double a partir de sua PathGeometry. Definindo a propriedade Source, você pode especificar se o DoubleAnimationUsingPath usa a coordenada x, coordenada y ou ângulo do caminho como sua saída. Você pode usar um DoubleAnimationUsingPath para girar um objeto ou movê-lo ao longo do eixo x ou y.
Entrada de Animação de Caminho
Cada classe de caminho de animação fornece uma propriedade PathGeometry para especificar sua entrada. A animação do caminho usa o PathGeometry para gerar seus valores de saída. A classe PathGeometry permite que você descreva várias figuras complexas que são compostas de linhas, arcos e curvas.
A parte principal de um PathGeometry é uma coleção de objetos PathFigure; esses objetos são assim chamados porque cada figura descreve uma forma distintas em PathGeometry. Cada PathFigure consiste de um ou mais objetos PathSegment, cada uma das quais descreve um segmento da figura.
Há muitos tipos de segmentos.
Tipo de segmento |
Descrição |
|---|---|
Cria um arco elíptico entre dois pontos. |
|
Cria uma curva Bézier cúbica entre dois pontos. |
|
Cria uma linha entre dois pontos. |
|
Cria uma série de curvas Bézier cúbicas. |
|
Cria uma série de linhas. |
|
Cria uma série de curvas Bézier quadráticas. |
|
Cria uma curva Bézier quadrática. |
Os segmentos em um PathFigure são combinados em uma única forma geométrica a qual usa o ponto final de cada segmento como o ponto inicial do segmento seguinte. A propriedade StartPoint de um PathFigure especifica o ponto do qual o primeiro segmento é desenhado. Cada segmento subsequente começa do ponto final do segmento anterior. Por exemplo, uma linha vertical de 10,50 para 10,150 pode ser definida atribuindo-se à propriedade StartPoint o valor 10,50 e criando-se um LineSegment com um parâmetro Point de 10,150.
Para obter mais informações sobre objetos PathGeometry, consulte Visão Geral de Geometria.
Em XAML, também pode usar uma sintaxe abreviada especial para definir a propriedade Figures de um PathGeometry. Para obter mais informações, consulte: Sintaxe de Marcação de Caminho.
Para obter mais informações sobre a sintaxe de caminho que é usada no exemplo de XAML, consulte a visão geral em Sintaxe de Marcação de Caminho.
Consulte também
Tarefas
Exemplo de animação do caminho
Conceitos
Sintaxe de Marcação de Caminho
Visão geral de técnicas de animação de propriedades