Overzicht van padanimaties

In dit onderwerp worden padanimaties geïntroduceerd, waarmee u een geometrisch pad kunt gebruiken om uitvoerwaarden te genereren. Padanimaties zijn handig voor het verplaatsen en draaien van objecten langs complexe paden.

Voorwaarden

Als u dit onderwerp wilt begrijpen, moet u bekend zijn met wpf-animatiefuncties. Zie het Animatieoverzichtvoor een inleiding tot animatiefuncties.

Omdat u een PathGeometry-object gebruikt om een padanimatie te definiëren, moet u ook bekend zijn met PathGeometry en de verschillende typen PathSegment objecten. Zie het Geometrieoverzichtvoor meer informatie.

Wat is een padanimatie?

Een padanimatie is een type AnimationTimeline dat een PathGeometry als invoer gebruikt. In plaats van een eigenschap Van, Naar of Op in te stellen (net als bij een van/naar/door-animatie) of sleutelframes te gebruiken (zoals u bij een sleutelframeanimatie doet), definieert u een geometrisch pad en gebruikt u dit om de eigenschap PathGeometry van de padanimatie in te stellen. Naarmate de padanimatie vordert, worden de x-, y- en hoekgegevens van het pad gelezen en wordt die informatie gebruikt om de uitvoer te genereren.

Padanimaties zijn erg handig voor het animeren van een object langs een complex pad. Een manier om een object langs een pad te verplaatsen, is door een MatrixTransform en een MatrixAnimationUsingPath te gebruiken om een object langs een complex pad te transformeren. In het volgende voorbeeld ziet u deze techniek met behulp van het MatrixAnimationUsingPath-object om de eigenschap Matrix van een MatrixTransformte animeren. De MatrixTransform wordt toegepast op een knop en zorgt ervoor dat deze langs een gebogen pad loopt. Omdat de eigenschap DoesRotateWithTangent is ingesteld op true, draait de rechthoek langs de tangens van het pad.

<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

Zie het overzicht syntaxis van padmarkeringen voor meer informatie over de padsyntaxis die wordt gebruikt in het XAML-voorbeeld. Zie Padanimatievoorbeeldvoor het volledige voorbeeld.

U kunt een padanimatie toepassen op een eigenschap met behulp van een Storyboard in XAML en code, of met behulp van de methode BeginAnimation in code. U kunt ook een padanimatie gebruiken om een AnimationClock te maken en deze toe te passen op een of meer eigenschappen. Zie Overzicht van eigenschapsanimatietechniekenvoor meer informatie over de verschillende methoden voor het toepassen van animaties.

Padanimatietypen

Omdat animaties eigenschapswaarden genereren, zijn er verschillende animatietypen voor verschillende eigenschapstypen. Als u een eigenschap wilt animeren die een Double (zoals de eigenschap X van een TranslateTransform) gebruikt, gebruikt u een animatie die Double waarden produceert. Als u een eigenschap wilt animeren die een Pointgebruikt, gebruikt u een animatie die Point waarden produceert, enzovoort.

Padanimatieklassen behoren tot de System.Windows.Media.Animation naamruimte en gebruiken de volgende naamconventie:

<type>AnimationUsingPath

Waarbij <Type> het type waarde is dat de klasse animeert.

WPF biedt de volgende padanimatieklassen.

Eigenschapstype	Bijbehorende padanimatieklasse	Voorbeeld
Double	DoubleAnimationUsingPath	Een object langs een pad animeren (Dubbele animatie)
Matrix	MatrixAnimationUsingPath	animatie toepassen op een object langs een pad (matrixanimatie)
Point	PointAnimationUsingPath	Animeer een object langs een pad (puntsanimatie)

Een MatrixAnimationUsingPath genereert Matrix waarden op basis van de PathGeometry. Bij gebruik met een MatrixTransformkan een MatrixAnimationUsingPath een object langs een pad verplaatsen. Als u de eigenschap DoesRotateWithTangent van de MatrixAnimationUsingPath instelt op true, wordt het object ook gedraaid langs de curven van het pad.

Een PointAnimationUsingPath genereert Point waarden van de x- en y-coördinaten van de PathGeometry. Door een PointAnimationUsingPath te gebruiken om een eigenschap te animeren die Point waarden gebruikt, kunt u een object langs een pad verplaatsen. Een PointAnimationUsingPath kan geen objecten draaien.

Een DoubleAnimationUsingPath genereert Double waarden vanuit de PathGeometry. Door de eigenschap Source in te stellen, kunt u opgeven of de DoubleAnimationUsingPath de x-coördinaat, y-coördinaat of de hoek van het pad als uitvoer gebruikt. U kunt een DoubleAnimationUsingPath gebruiken om een object te draaien of over de x-as of y-as te verplaatsen.

Padanimatieinvoer

Elke klasse voor padanimatie biedt een eigenschap PathGeometry voor het specificeren van de invoer. De padanimatie gebruikt de PathGeometry om de uitvoerwaarden te genereren. Met de PathGeometry-klasse kunt u meerdere complexe afbeeldingen beschrijven die bestaan uit bogen, curven en lijnen.

Het hart van een PathGeometry is een verzameling PathFigure objecten; deze objecten zijn zo benoemd omdat elke afbeelding een discrete vorm in de PathGeometrybeschrijft. Elke PathFigure bestaat uit een of meer PathSegment objecten, die elk een segment van de afbeelding beschrijven.

Er zijn veel soorten segmenten.

Segmenttype	Beschrijving
ArcSegment	Hiermee maakt u een elliptische boog tussen twee punten.
BezierSegment	Hiermee maakt u een kubieke Bezier-curve tussen twee punten.
LineSegment	Hiermee maakt u een lijn tussen twee punten.
PolyBezierSegment	Hiermee maakt u een reeks kubieke Bezier-curven.
PolyLineSegment	Maakt een reeks lijnen.
PolyQuadraticBezierSegment	Hiermee maakt u een reeks kwadratische Bezier-curven.
QuadraticBezierSegment	Hiermee maakt u een kwadratische Bezier-curve.

De segmenten in een PathFigure worden gecombineerd tot één geometrische vorm, die het eindpunt van een segment gebruikt als het beginpunt van het volgende segment. De eigenschap StartPoint van een PathFigure geeft het punt aan van waaruit het eerste segment wordt getekend. Elk volgend segment begint op het eindpunt van het vorige segment. Een verticale lijn van 10,50 naar 10,150 kan bijvoorbeeld worden gedefinieerd door de eigenschap StartPoint in te stellen op 10,50 en een LineSegment te maken met een eigenschapsinstelling van Point van 10,150.

Zie het Geometrieoverzichtvoor meer informatie over PathGeometry objecten.

In XAML kunt u ook een speciale verkorte syntaxis gebruiken om de eigenschap Figures van een PathGeometryin te stellen. Zie overzicht van de syntaxis van padmarkeringen voor meer informatie.

Zie het overzicht syntaxis van padmarkeringen voor meer informatie over de padsyntaxis die wordt gebruikt in het XAML-voorbeeld.

Zie ook

• voorbeeld van animatiepad
• padmarkeringssyntaxis
• Onderwerpen over het maken van animatiepaden
• Overzicht van animaties
• Overzicht van eigenschapsanimatietechnieken