Yol Animasyonlarına Genel Bakış
Bu konu başlığında çıkış değerleri oluşturmak için geometrik yol kullanmanıza olanak tanıyan yol animasyonları tanıtılmaktadır. Yol animasyonları, nesneleri karmaşık yollar boyunca taşımak ve döndürmek için kullanışlıdır.
Önkoşullar
Bu konuyu anlamak için WPF animasyon özellikleri hakkında bilgi sahibi olmanız gerekir. Animasyon özelliklerine giriş için bkz. Animasyona Genel Bakış.
Yol animasyonu tanımlamak için bir PathGeometry nesne kullandığınızdan, ve farklı nesne türlerine PathGeometry PathSegment de aşina olmanız gerekir. Daha fazla bilgi için bkz. Geometriye Genel Bakış.
Yol Animasyonu Nedir?
Yol animasyonu, girişi olarak kullanan bir PathGeometry türüdürAnimationTimeline. From, To veya By özelliğini ayarlamak (From/To/By animasyonu için yaptığınız gibi) veya anahtar çerçeveler kullanmak yerine (anahtar çerçevesi animasyonu için kullandığınız gibi), geometrik bir yol tanımlar ve yol animasyonunun özelliğini ayarlamak PathGeometry için bunu kullanırsınız. Yol animasyonu ilerledikçe, yoldaki x, y ve açı bilgilerini okur ve çıkışını oluşturmak için bu bilgileri kullanır.
Yol animasyonları, karmaşık bir yol boyunca bir nesneyi animasyonlandırmak için çok kullanışlıdır. Bir nesneyi yol boyunca taşımanın bir yolu, karmaşık bir yol boyunca bir nesneyi dönüştürmek için ve MatrixAnimationUsingPath kullanmaktırMatrixTransform. Aşağıdaki örnek, nesnesini kullanarak MatrixAnimationUsingPath özelliğinin MatrixTransformanimasyonunu Matrix oluşturarak bu tekniği gösterir. MatrixTransform bir düğmeye uygulanır ve eğri bir yol boyunca hareket etmesini sağlar. özelliği olarak ayarlandığından DoesRotateWithTangent truedikdörtgen, yolun tanjantını döndürür.
<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
XAML örneğinde kullanılan yol söz dizimi hakkında daha fazla bilgi için bkz . Yol İşaretlemeyi Söz Dizimine genel bakış. Örneğin tamamı için bkz . Yol Animasyon Örneği.
XAML ve kod içinde kullanarak Storyboard veya kodda yöntemini kullanarak bir özelliğe yol animasyonu BeginAnimation uygulayabilirsiniz. Yol animasyonu kullanarak da oluşturabilir ve bunu bir AnimationClock veya daha fazla özelliğe uygulayabilirsiniz. Animasyon uygulamak için kullanılan farklı yöntemler hakkında daha fazla bilgi için bkz . Özellik Animasyon Tekniklerine Genel Bakış.
Yol Animasyon Türleri
Animasyonlar özellik değerleri oluşturduğundan, farklı özellik türleri için farklı animasyon türleri vardır. alan bir özelliğe Double animasyon eklemek için (örneğin X , bir TranslateTransformözelliğinin), değerleri üreten Double bir animasyon kullanırsınız. alan bir özelliğe Pointanimasyon eklemek için değer üreten Point bir animasyon kullanırsınız.
Yol animasyon sınıfları ad alanına System.Windows.Media.Animation aittir ve aşağıdaki adlandırma kuralını kullanır:
<Tür> AnimationUsingPath
Burada <Tür> , sınıfın animasyonunu yaptığı değer türüdür.
WPF aşağıdaki yol animasyon sınıflarını sağlar.
A MatrixAnimationUsingPath , Matrix değerinden PathGeometrydeğerler oluşturur. ile MatrixTransformkullanıldığında, bir MatrixAnimationUsingPath nesneyi yol boyunca taşıyabilir. özelliğini MatrixAnimationUsingPath trueolarak ayarlarsanızDoesRotateWithTangent, nesneyi yolun eğrileri boyunca da döndürür.
A PointAnimationUsingPath , Point değerinin x ve y koordinatlarından PathGeometrydeğerler oluşturur. PointAnimationUsingPath Değerleri alan Point bir özelliğe animasyon eklemek için kullanarak, bir nesneyi yol boyunca taşıyabilirsiniz. A PointAnimationUsingPath , nesneleri döndüremez.
A DoubleAnimationUsingPath , Double değerinden PathGeometrydeğerler oluşturur. özelliğini ayarlayarak, yolunun Source DoubleAnimationUsingPath çıkış olarak x koordinatını mı, y koordinatını mı yoksa açısını mı kullanacağını belirtebilirsiniz. Bir nesneyi döndürmek veya x ekseni veya y ekseni boyunca taşımak için kullanabilirsiniz DoubleAnimationUsingPath .
Yol Animasyonu Girişi
Her yol animasyon sınıfı, girişini belirtmek için bir PathGeometry özellik sağlar. Yol animasyonu, çıkış değerlerini oluşturmak için öğesini PathGeometry kullanır. PathGeometry sınıfı, yaylardan, eğrilerden ve çizgilerden oluşan birden çok karmaşık şekli tanımlamanızı sağlar.
bir PathGeometry nesnenin merkezinde bir nesne koleksiyonu PathFigure bulunur; her şekil içindeki PathGeometryayrık bir şekli tanımladığından bu nesneler bu şekilde adlandırılır. Her PathFigure biri, şeklin bir kesimini tanımlayan bir veya daha fazla PathSegment nesneden oluşur.
Birçok segment türü vardır.
| Segment Türü | Açıklama |
|---|---|
| ArcSegment | İki nokta arasında eliptik bir yay oluşturur. |
| BezierSegment | İki nokta arasında bir küp Bezier eğrisi oluşturur. |
| LineSegment | İki nokta arasında bir çizgi oluşturur. |
| PolyBezierSegment | Bir dizi kübik Bezier eğrisi oluşturur. |
| PolyLineSegment | Bir dizi satır oluşturur. |
| PolyQuadraticBezierSegment | İkinci dereceden Bezier eğrileri dizisi oluşturur. |
| QuadraticBezierSegment | İkinci dereceden bezier eğrisi oluşturur. |
içindeki PathFigure segmentler, bir sonraki segmentin başlangıç noktası olarak bir segmentin bitiş noktasını kullanan tek bir geometrik şekil halinde birleştirilir. özelliğiPathFigure, StartPoint ilk kesimin çizildiği noktayı belirtir. Sonraki her segment, önceki segmentin bitiş noktasında başlar. Örneğin, öğesinin 10,50 10,150 dikey çizgisi, özelliği 10,50 olarak ayarlanarak StartPoint ve özelliği ayarıyla 10,150Point oluşturularak LineSegment tanımlanabilir.
Nesneler hakkında PathGeometry daha fazla bilgi için bkz. Geometriye Genel Bakış.
XAML'de, özelliğini ayarlamak Figures için özel kısaltılmış bir PathGeometrysöz dizimi de kullanabilirsiniz. Daha fazla bilgi için bkz . Yol İşaretlemeyi Söz Dizimine genel bakış.
XAML örneğinde kullanılan yol söz dizimi hakkında daha fazla bilgi için bkz . Yol İşaretlemeyi Söz Dizimine genel bakış.
Ayrıca bkz.
.NET Desktop feedback