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 ao longo de 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ção, consulte a Visão geral da animação.

Como você usa um PathGeometry objeto para definir uma animação de caminho, você também deve estar familiarizado com PathGeometry os diferentes tipos de PathSegment objetos. Para obter mais informações, consulte a Visão Geral da Geometria.

O que é uma animação de caminho?

Uma animação de caminho é um tipo de AnimationTimeline que usa uma PathGeometry como entrada. Em vez de definir uma propriedade From, To ou By (como você faz para uma animação De/Para/Por) ou usar quadros-chave (como você usa para uma animação de quadro-chave), defina um caminho geométrico e use-o para definir a PathGeometry propriedade da animação de caminho. À medida que a animação de caminho progride, ela lê as informações x, y e angular do caminho e usa essas informações para gerar sua 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 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 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 propriedade DoesRotateWithTangent está 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 o exemplo completo, confira Exemplo de animação de caminho.

Você pode aplicar uma animação de caminho a uma propriedade usando um Storyboard em 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 animações, consulte Visão geral das técnicas de animação de propriedade.

Tipos de animação de caminho

Como as animações geram valores de propriedade, há diferentes tipos de animação para diferentes tipos de propriedade. Para animar uma propriedade que usa um Double (como a propriedade X de um TranslateTransform), use uma animação que produz valores Double. Para animar uma propriedade que requer um Point, você usa uma animação que produz valores Point, 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 <Tipo> é o tipo de valor que a classe anima.

O WPF fornece as seguintes classes de animação de caminho.

Um MatrixAnimationUsingPath gera Matrix valores de sua PathGeometry. Quando usado com um MatrixTransform, um MatrixAnimationUsingPath pode mover um objeto ao longo de um caminho. Se você definir a propriedade DoesRotateWithTangent do MatrixAnimationUsingPath para true, ela também girará o objeto ao longo das curvas do caminho.

Um PointAnimationUsingPath gera valores das coordenadas Point x e y de sua PathGeometry. Usando um PointAnimationUsingPath para animar uma propriedade que aceita Point valores, é possível mover um objeto ao longo de um caminho. PointAnimationUsingPath não pode girar objetos.

Um DoubleAnimationUsingPath gera Double valores de sua PathGeometry. Ao definir a propriedade Source, você pode especificar se a DoubleAnimationUsingPath usa a coordenada x, a coordenada y ou o â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 eixo y.

Entrada de animação de trajetória

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 uma PathGeometry está uma coleção de PathFigure objetos; esses objetos são chamados assim porque cada forma descreve um formato distinto no PathGeometry. Cada PathFigure consiste em um ou mais objetos PathSegment, cada um dos quais descreve um segmento da figura.

Há muitos tipos de segmentos.

Os segmentos em um 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 um PathFigure especifica o ponto do qual o primeiro segmento é desenhado. Cada segmento subsequente começa no ponto final do segmento anterior. Por exemplo, uma linha vertical de 10,50 a 10,150 pode ser definida ao definir a propriedade StartPoint para 10,50 e criar um LineSegment com a configuração da propriedade Point para 10,150.

Para obter mais informações sobre PathGeometry objetos, consulte a Visão Geral da Geometria.

No XAML, você também pode usar uma sintaxe abreviada especial para definir a Figures propriedade de um PathGeometry. Para obter mais informações, consulte a visão geral da 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 .

Consulte também

• Exemplo de animação de caminho
• Sintaxe de marcação de caminho
• Tópicos explicativos de animação do caminho
• Visão geral da animação
• Visão geral das técnicas de animação da propriedade