نظرة عامة حول حركات المسار
يقدم هذا الموضوع مسار الحركات التي تمكنك من استخدام هندسية المسار لإنشاء قيم الإخراج. مسار الحركة مفيدة لنقل و تدوير كائن بطول مسارات معقدة.
المتطلبات الأساسية
لفهم هذا الموضوع يجب أن تكون معتاداً على مميزات الحركة WPF الأساسية. للحصول على مقدمة عن مميزات الحركة، راجع نظرة عامة حول الحركة.
بسبب استخدام PathGeometry الكائن لتعريف حركة "مسار" ، يجب أيضاً أن تكون معتاداً PathGeometry و أنواع مختلفة من PathSegment الكائنات. لمزيد من المعلومات، راجع نظرة عامة على هندسة.
ما هي محتويات مسار الحركه ؟
حركة مسار نوع من AnimationTimeline الذي يستخدم PathGeometry أنه الإدخال الخاص به. بدلاً من تعيين من ، إلى أو حسب الخاصيه (كما تفعل مع من/إلى/حسب الحركة) أو استخدام الإطارات مفتاح (كما يمكنك استخدام حركة مفتاح الإطار) ، لتعريف مسار هندسية ثم استخدم لتعيين PathGeometry خاصيه من حركة المسار. تقدم حركة المسار فإنه يقرأ x و y و معلومات زاوية من المسار وتستخدم هذه المعلومات لإنشاء المخرجات به .
مسار الحركات مفيدة جداً تحريك كائن بمحاذاة مسار مركب. باتجاه واحد لنقل كائن طول مسار لاستخدام MatrixTransform و MatrixAnimationUsingPath لتحويل كائن بطول مسار معقد يوضح المثال التالي هذه التقنية باستخدام MatrixAnimationUsingPath الكائن لتحريك Matrix خاصيه من MatrixTransform. MatrixTransform تطبيق إلى زر ويؤدي إلى نقل بطول مسار منحني لأن DoesRotateWithTangent خاصية تعيين إلى true ، استدارة المستطيل مع ظل المسار.
<Page
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:PresentationOptions="https://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:mc="https://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>
Imports System
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
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);
};
}
}
}
للحصول على معلومات حول بناء جملة المسار المستخدم في XAML المثال، راجعسياق علامات المسار نظرة عامة حول. للحصول على نموذج كاملة راجع مسار حركة نموذج.
يمكنك تطبيق حركة مسار إلى خاصيه باستخدام Storyboard في XAML و التعليمات البرمجية أو باستخدام BeginAnimation الأسلوب في التعليمات البرمجية. يمكنك أيضاً استخدام حركة مسار لإنشاء AnimationClock وتطبيقه لواحد أو أكثر من الخصائص. لمزيد من المعلومات حول أساليب تطبيق الحركات, راجع نظرة عامة حول أساليب تحريك الخاصية.
أنواع مسار الحركه
لأن الحركات تعطي قيم خصائص ، توجد أنواع مختلفة للحركة للأنواع المختلفة من الخصائص. لتحريك الخاصية التي تأخذDouble ، مثل الخاصية Xلعنصر TranslateTransform،استخدم الحركة التي تنتج قيم Double. لتحريك الخاصية التي تأخذ Point, استخدم الحركة التي تنتج القيم Point وهكذا.
تنتمي فئات الحركة من/الى/بواسطة الى مساحة الاسم System.Windows.Media.Animation وتقوم باستخدام اصطلاح التسمية التالية:
*<النوع>*AnimationUsingPath
حيث <النوع> هو نوع القيمة التي تقوم الفئة بتحريكها.
WPF توفير المسار المتحرك التالي الفئات.
نوع الخاصية |
حركة المسار المطابق للفئه |
المثال |
|---|---|---|
MatrixAnimationUsingPath بإنشاء Matrix قيم منه PathGeometry. عند استخدام مع MatrixTransform ، MatrixAnimationUsingPath يمكن نقل كائن بمحاذاة مسار. إذا قمت بتعيين DoesRotateWithTangent خاصيه من MatrixAnimationUsingPath true ، أيضاً استدارة الكائن بطول مسار المنحنيات.
PointAnimationUsingPath بإنشاء Point قيم من x و y-إحداثيات به PathGeometry. باستخدام PointAnimationUsingPath لتحريك خاصيه التي تأخذ Point القيم، يمكنك نقل كائن بمحاذاة مسار . PointAnimationUsingPath يتعذر تدوير كائن .
DoubleAnimationUsingPath بإنشاء Double قيم منه PathGeometry. بواسطة تعيين Source الخاصية ، يمكنك تحديد ما إذا كان DoubleAnimationUsingPath يستخدم الإحداثي س أو ص إحداثي أو زاوية المسار المخرجه . يمكنك استخدام DoubleAnimationUsingPath لاستدارة كائن أو نقلها إلى جانب محور س أو المحور ص.
مسار حركة الإدخال
يوفر كل فئة حركة المسار PathGeometry خاصيه لتحديد الإدخال الخاص به. يستخدم حركة المسار PathGeometry لإنشاء به قيم الإخراج. PathGeometry فئة يتيح لك تصف متعددة التوضيحية المعقدة التي تتكون من أقواس ، والمنحنيات و الأسطر.
في قلب PathGeometry عبارة عن مجموعة من PathFigure الكائنات; هذه الكائنات لذا يسمى لأن كل رقم يصف شكل منفصل في PathGeometry. كل PathFigure يتكون من أحد أو اكثر PathSegment الكائنات كل منها وصف قطعة من الشكل.
هناك أنواع عديدة من القطع.
نوع القطعة |
الوصف |
|---|---|
ينشئ قوس قطع ناقص بين نقطتين. |
|
إنشاء منحنى بيزيه المكعب بين نقطتين. |
|
ينشئ خط بين نقطتين. |
|
ينشيء سلسلة من منحنيات Bezier المكعبة. |
|
يقوم بإنشاء سلسلة من الخطوط. |
|
يقوم بإنشاء سلسلة من المنحنيات Bezier التربيعية. |
|
يقوم بإنشاء منحنى بيزيه التربيعى |
المقاطع داخل PathFigure يتم دمجها ضمن شكل هندسي واحد مع نقطة النهاية لكل مقطع تكون نقطة البدء للمقطع التالي. خاصية StartPoint الخاصة بـ PathFigure تقوم بتحديد نقطة منها يتم رسم المقطع الأول. يبدأ كل مقطع لاحق عند نقطة النهاية من المقطع السابق. على سبيل المثال، خط عمودي من 10,50 إلى 10,150 يمكن تعريفه بواسطة إعداد خاصية StartPoint إلى 10,50 وإنشاء LineSegment بإعداد خاصية Point من 10,150.
لمزيد من المعلومات حول كائنات PathGeometry، راجع نظرة عامة على هندسة.
في XAML ، يمكنك أيضاً استخدام بناء جملة خاص مختصر لتعيين Figures خاصيه من PathGeometry. للحصول على مزيد من المعلومات حول WMI، راجع نظرة عامة حول سياق علامات المسار.
للحصول على معلومات حول بناء جملة المسار المستخدم في XAML المثال، راجع سياق علامات المسار نظرة عامة حول.
راجع أيضًا:
المبادئ
نظرة عامة حول أساليب تحريك الخاصية