Visão geral de animações do 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 em caminhos complexos.
Pré-requisitos
Para entender este tópico, você deve estar familiarizado com os recursos de animações do WPF. Para obter uma introdução aos recursos de animações, consulte a Visão geral da animação.
Como você usa um PathGeometry objeto para definir uma animação de caminho, também deve estar familiarizado com PathGeometry os diferentes tipos de PathSegment objetos. Para obter mais informações, consulte Visão geral de geometria.
O que é uma animação de caminho?
Uma animação de caminho é um tipo de AnimationTimeline que usa a PathGeometry como entrada. Em vez de definir uma propriedade De, Para ou Por (como você faz para uma animação De/Para/Por) ou usar quadros-chave (como você usa para uma animação de quadro-chave), você define um caminho geométrico e o usa para definir a PathGeometry propriedade da animação de caminho. Conforme a animação de caminho progride, ela lê x, y e informações de â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 ao longo de um caminho complexo. Uma maneira de mover um objeto ao longo de um caminho é usar a MatrixTransform e a MatrixAnimationUsingPath para transformar um objeto ao longo de um caminho complexo. O exemplo a seguir demonstra essa técnica usando o MatrixAnimationUsingPath objeto para animar a Matrix propriedade de um MatrixTransform. O MatrixTransform é aplicado a um botão e faz com que ele se mova ao longo de um caminho curvo. Como a DoesRotateWithTangent propriedade é definida como true, o retângulo gira ao longo da tangente do caminho.
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:mc="http://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);
};
}
}
}
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Navigation
Imports System.Windows.Shapes
Namespace SDKSample
''' <summary>
''' Shows how to animate an object along
''' a geometric path.
''' </summary>
Public Class MatrixAnimationUsingPathDoesRotateWithTangentExample
Inherits Page
Public Sub New()
Me.Margin = New Thickness(20)
' Create a NameScope for the page so that
' we can use Storyboards.
NameScope.SetNameScope(Me, New NameScope())
' Create a button.
Dim aButton As New Button()
aButton.MinWidth = 100
aButton.Content = "A Button"
' Create a MatrixTransform. This transform
' will be used to move the button.
Dim buttonMatrixTransform As New MatrixTransform()
aButton.RenderTransform = buttonMatrixTransform
' Register the transform's name with the page
' so that it can be targeted by a Storyboard.
Me.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.
Dim mainPanel As New Canvas()
mainPanel.Width = 400
mainPanel.Height = 400
mainPanel.Children.Add(aButton)
Me.Content = mainPanel
' Create the animation path.
Dim animationPath As New PathGeometry()
Dim pFigure As New PathFigure()
pFigure.StartPoint = New Point(10, 100)
Dim pBezierSegment As 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.
Dim matrixAnimation As 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.
Dim pathAnimationStoryboard As New Storyboard()
pathAnimationStoryboard.Children.Add(matrixAnimation)
' Start the storyboard when the button is loaded.
AddHandler aButton.Loaded, Sub(sender As Object, e As RoutedEventArgs) pathAnimationStoryboard.Begin(Me)
End Sub
End Class
End Namespace
Para obter mais informações sobre a sintaxe de caminho usada no exemplo XAML, consulte a visão geral da sintaxe de marcação de caminho. Para ver o exemplo completo, consulte Exemplo de animação de caminho.
Você pode aplicar uma animação de caminho a uma propriedade usando um Storyboard em XAML e code ou usando o BeginAnimation método em code. Você também pode usar uma animação de caminho para criar uma AnimationClock e aplicá-la a uma ou mais propriedades. Para obter mais informações sobre os diferentes métodos para aplicação de animações, consulte a Visão geral das técnicas de animação de propriedades.
Tipos de animação de caminho
Como as animações geram valores de propriedade, existem diferentes tipos de animação para diferentes tipos de propriedades. Para animar uma propriedade que usa a Double (como a X propriedade de um TranslateTransform), use uma animação que produz Double valores. Para animar uma propriedade que usa um Point, use uma animação que produza Point valores e assim por diante.
As classes de animação de caminho pertencem ao System.Windows.Media.Animation namespace e usam a seguinte convenção de nomenclatura:
<Tipo> AnimationUsingPath
Onde <Type> é o tipo de valor que a classe anima.
O WPF fornece as seguintes classes de animação de caminho.
| Tipo de propriedade | Classe de animação de caminho correspondente | Exemplo |
|---|---|---|
| Double | DoubleAnimationUsingPath | Animar um objeto ao longo de um caminho (animação dupla) |
| Matrix | MatrixAnimationUsingPath | Animar um objeto ao longo de um caminho (animação de matriz) |
| Point | PointAnimationUsingPath | Animar um objeto ao longo de um caminho (animação de ponto) |
A MatrixAnimationUsingPath gera Matrix valores a partir de seu PathGeometry. Quando usado com um MatrixTransform, a MatrixAnimationUsingPath pode mover um objeto ao longo de um caminho. Se você definir a DoesRotateWithTangent propriedade de MatrixAnimationUsingPath como true, ela também girará o objeto ao longo das curvas do caminho.
A PointAnimationUsingPath gera Point valores a partir das coordenadas x e y de seu PathGeometry. Usando a PointAnimationUsingPath para animar uma propriedade que usa Point valores, você pode mover um objeto ao longo de um caminho. A PointAnimationUsingPath não pode girar objetos.
A DoubleAnimationUsingPath gera Double valores a partir de seu PathGeometry. Ao definir a Source propriedade, você pode especificar se o DoubleAnimationUsingPath usa a coordenada x, a coordenada y ou o ângulo do caminho como sua saída. Você pode usar a DoubleAnimationUsingPath para girar um objeto ou movê-lo ao longo do eixo x ou y.
Entrada de animação de caminho
Cada classe de animação de caminho fornece uma PathGeometry propriedade para especificar sua entrada. A animação de caminho usa o PathGeometry para gerar seus valores de saída. A PathGeometry classe permite descrever várias figuras complexas compostas por arcos, curvas e linhas.
No coração de a PathGeometry está uma coleção de PathFigure objetos; esses objetos são assim chamados porque cada figura descreve uma forma discreta no PathGeometry. Cada PathFigure um consiste em um ou mais PathSegment objetos, cada um dos quais descreve um segmento da figura.
Há muitos tipos de segmentos.
| Tipo de segmento | Descrição |
|---|---|
| ArcSegment | Cria um arco elíptico entre dois pontos. |
| BezierSegment | Cria uma curva de Bézier cúbica entre dois pontos. |
| LineSegment | Cria uma linha entre dois pontos. |
| PolyBezierSegment | Cria uma série de curvas de Bézier cúbicas. |
| PolyLineSegment | Cria uma série de linhas. |
| PolyQuadraticBezierSegment | Cria uma série de curvas de Bézier quadráticas. |
| QuadraticBezierSegment | Cria uma curva de Bezier quadrática. |
Os segmentos em a PathFigure são combinados em uma única forma geométrica, que usa o ponto final de um segmento como o ponto inicial do próximo segmento. A StartPoint propriedade de a PathFigure especifica o ponto a partir do qual o primeiro segmento é desenhado. Cada segmento subsequente começa no ponto de extremidade do segmento anterior. Por exemplo, uma linha vertical de 10,50 para 10,150 pode ser definida definindo a StartPoint propriedade para 10,50 e criando uma LineSegment com uma Point configuração de propriedade de 10,150.
Para obter mais informações sobre PathGeometry objetos, consulte a Visão geral da geometria.
Em XAML, você também pode usar uma sintaxe abreviada especial para definir a Figures propriedade de um PathGeometryarquivo . Para obter mais informações, consulte a visão geral de Sintaxe de marcação de caminho.
Para obter mais informações sobre a sintaxe de caminho usada no exemplo XAML, consulte a visão geral da sintaxe de marcação de caminho.
Confira também
.NET Desktop feedback