Anteckning
Åtkomst till den här sidan kräver auktorisering. Du kan prova att logga in eller ändra kataloger.
Åtkomst till den här sidan kräver auktorisering. Du kan prova att ändra kataloger.
Det här avsnittet introducerar sökvägsanimeringar som gör att du kan använda en geometrisk sökväg för att generera utdatavärden. Sökvägsanimeringar är användbara för att flytta och rotera objekt längs komplexa sökvägar.
Förutsättningar
För att förstå det här avsnittet bör du vara bekant med WPF-animeringsfunktioner. För en introduktion till animeringsfunktioner, se översikt över animering.
Eftersom du använder ett PathGeometry-objekt för att definiera en sökvägsanimering bör du också känna till PathGeometry och de olika typerna av PathSegment objekt. För mer information, se översikt över geometri .
Vad är en sökvägsanimering?
En sökvägsanimering är en typ av AnimationTimeline som använder en PathGeometry som indata. I stället för att ange en från-, till- eller efter-egenskap (som du gör för en från/till/av-animering) eller använda nyckelramar (som du använder för en animering av nyckelramen) definierar du en geometrisk sökväg och använder den för att ange egenskapen PathGeometry för sökvägsanimeringen. När sökvägsanimeringen fortskrider läser den x-, y- och vinkelinformationen från sökvägen och använder den informationen för att generera utdata.
Sökvägsanimeringar är mycket användbara för att animera ett objekt längs en komplex sökväg. Ett sätt att flytta ett objekt längs en sökväg är att använda en MatrixTransform och en MatrixAnimationUsingPath för att transformera ett objekt längs en komplex sökväg. I följande exempel visas den här tekniken genom att använda MatrixAnimationUsingPath-objektet för att animera egenskapen Matrix för en MatrixTransform. Den MatrixTransform tillämpas på en knapp och får den att röra sig längs en kurvad bana. Eftersom egenskapen DoesRotateWithTangent är inställd på trueroterar rektangeln längs sökvägens tangent.
<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
Mer information om sökvägssyntaxen som används i XAML-exemplet finns i översikten Path Markup Syntax. Det fullständiga exemplet finns i Exempel på sökvägsanimering.
Du kan använda en sökvägsanimering för en egenskap med hjälp av en Storyboard i XAML och kod, eller med hjälp av BeginAnimation-metoden i kod. Du kan också använda en sökvägsanimering för att skapa en AnimationClock och tillämpa den på en eller flera egenskaper. Mer information om de olika metoderna för att tillämpa animeringar finns i Översikt över egenskapsanimeringstekniker.
Sökvägsanimeringstyper
Eftersom animeringar genererar egenskapsvärden finns det olika animeringstyper för olika egenskapstyper. Om du vill animera en egenskap som tar en Double (till exempel egenskapen X för en TranslateTransform) använder du en animering som genererar Double värden. Om du vill animera en egenskap som tar en Pointanvänder du en animering som producerar värden av typen Point, och så vidare.
Sökvägsanimeringsklasser tillhör namnområdet System.Windows.Media.Animation och använder följande namngivningskonvention:
<typ>AnimationUsingPath
Där <Typ> är den typ av värde som klassen animerar.
WPF innehåller följande sökvägsanimeringsklasser.
| Egenskapstyp | Motsvarande sökvägsanimeringsklass | Exempel |
|---|---|---|
| Double | DoubleAnimationUsingPath | Animera ett objekt längs en sökväg (dubbel animering) |
| Matrix | MatrixAnimationUsingPath | Animera ett objekt längs en sökväg (matrisanimering) |
| Point | PointAnimationUsingPath | Animera ett objekt längs en sökväg (punktanimering) |
En MatrixAnimationUsingPath genererar Matrix värden från sin PathGeometry. När det används med en MatrixTransformkan en MatrixAnimationUsingPath flytta ett objekt längs en bana. Om du anger egenskapen DoesRotateWithTangent för MatrixAnimationUsingPath till trueroteras även objektet längs sökvägens kurvor.
En PointAnimationUsingPath genererar Point värden från x- och y-koordinaterna för sin PathGeometry. Genom att använda en PointAnimationUsingPath för att animera en egenskap som tar Point värden kan du flytta ett objekt längs en bana. En PointAnimationUsingPath kan inte rotera objekt.
En DoubleAnimationUsingPath genererar Double värden från dess PathGeometry. Genom att ange egenskapen Source kan du ange om DoubleAnimationUsingPath använder x-koordinaten, y-koordinaten eller vinkeln för sökvägen som utdata. Du kan använda en DoubleAnimationUsingPath för att rotera ett objekt eller flytta det längs x-axeln eller y-axeln.
Indata för sökvägsanimering
Varje sökvägsanimeringsklass innehåller en PathGeometry egenskap för att ange dess indata. Sökvägsanimeringen använder PathGeometry för att generera sina utdatavärden. Med klassen PathGeometry kan du beskriva flera komplexa figurer som består av bågar, kurvor och linjer.
I hjärtat av en PathGeometry finns en samling PathFigure objekt; dessa objekt är så namngivna eftersom varje figur beskriver en diskret form i PathGeometry. Varje PathFigure består av ett eller flera PathSegment objekt, som var och en beskriver ett segment av figuren.
Det finns många typer av segment.
| Segmenttyp | Beskrivning |
|---|---|
| ArcSegment | Skapar en elliptisk båge mellan två punkter. |
| BezierSegment | Skapar en kubisk Bezier-kurva mellan två punkter. |
| LineSegment | Skapar en linje mellan två punkter. |
| PolyBezierSegment | Skapar en serie kubiska Bezier-kurvor. |
| PolyLineSegment | Skapar en serie rader. |
| PolyQuadraticBezierSegment | Skapar en serie kvadratiska Bezier-kurvor. |
| QuadraticBezierSegment | Skapar en kvadratisk Bezier-kurva. |
Segmenten i en PathFigure kombineras till en enda geometrisk form, som använder slutpunkten för ett segment som startpunkt för nästa segment. Egenskapen StartPoint för en PathFigure anger från vilken punkt det första segmentet ritas. Varje efterföljande segment börjar vid slutpunkten för föregående segment. Du kan till exempel definiera en lodrät linje från 10,50 till 10,150 genom att ange egenskapen StartPoint till 10,50 och skapa en LineSegment med en Point egenskapsinställning för 10,150.
Mer information om PathGeometry objekt finns i översikten över geometri.
I XAML kan du också använda en särskild förkortad syntax för att ange egenskapen Figures för en PathGeometry. För mer information, se Översikt över syntax för sökvägsmarkering.
Mer information om sökvägssyntaxen som används i XAML-exemplet finns i översikten Path Markup Syntax.
Se även
Samarbeta med oss på GitHub
Källan för det här innehållet finns på GitHub, där du även kan skapa och granska ärenden och pull-begäranden. Se vår deltagarguide för mer information.
.NET Desktop feedback