نظرة عامة حول أساليب تحريك الخاصية
يصف هذا الموضوع على أساليب مختلفة عن خصائص الحركات : storyboards "و" الحركات المحلي "و" الساعات ، و لكل- اشكال الحركات.
المتطلبات الأساسية
لفهم هذا الموضوع يجب أن تكون على دراية بالميزات الأساسية الحركة المذكورة في نظرة عامة حول الحركة.
أساليب مختلفة للتحريك
بسبب وجود العديد من وحدات السيناريو مختلفة عن الحركات خصائص WPF يوفر العديد من الطرق للحصول على خصائص الحركة.
بالنسبة لكل أسلوب الجدول التالي تشير إلى ما إذا كان يمكن أن يكون استخدام لكل مثيل, في الأنماط في قوالب عنصر التحكم أو في معلومات قوالب; ما إذا كان يمكن استخدامها في XAML; وتمكنك ما إذا كانت هي الطريقة بشكل تفاعلي التحكم حركة. يشير "لكل مثيل" إلى تقنية تطبيق حركة أو لوحة عمل مباشرةً إلى مثيلات الكائن بدلاً من نمط, قالب عنصر التحكم أو قالب بيانات.
تقنية الحركه |
المواقف |
يدعم XAML |
يمكن إدارتها بشكل تبادلي |
|---|---|---|---|
لوحة العمل الحركه |
لكل مثيلStyle, ControlTemplate, DataTemplate |
نعم |
نعم |
محلي الحركه |
لكل مثيل |
لا |
لا |
حركه الساعه |
لكل مثيل |
لا |
نعم |
لكل إطار حركه |
لكل مثيل |
لا |
غير متوفر |
لوحة العمل الحركه
استخدام Storyboard عندما ترغب لتعريف ثم قم بتطبيق الحركة في XAML ، بشكل تفاعلي التحكم الخاص بك الحركات بعد قيامهم بدء إنشاء شجرة معقدة من حركات أو تحريك في Style ، ControlTemplate أو DataTemplate. لكائن متحرك بواسطة Storyboard ، يجب أن يكون FrameworkElement أو FrameworkContentElement ، أو يجب أن يتم استخدام لتعيين FrameworkElement أو FrameworkContentElement. لمزيد من المعلومات، راجع نظرة عامة حول لوحات العمل.
Storyboard نوع خاص من حاوية Timeline والتي توفر معلومات استهداف الحركات يتضمن. لتحريك مع Storyboard ، أكمل الثلاث خطوات التالية.
تقوم بتعريف Storyboard واحد أو أكثر من الحركات.
استخدم الخصائص المرفقة لـ TargetName و TargetProperty لتحديد الكائن والخاصية التي يتم تطبيق الحركة عليها.
(رمز فقط) تعريف NameScope للحصول FrameworkElement أو FrameworkContentElement. تسجيل أسماء الكائنات لتحريك مع ذلك FrameworkElement أو FrameworkContentElement.
تبدأ Storyboard.
تبدأ Storyboard يتم تطبيق الحركة للخصائص أنها تحريك وبدء تشغيلها. هناك طريقتان لتبدأ Storyboard: يمكنك استخدام Begin طريقه توفرها Storyboard فئة أو يمكن استخدام BeginStoryboard الإجراء. الطريقة الوحيدة لتحريك في XAML هي استخدامBeginStoryboard الإجراء. A BeginStoryboard يمكن استخدام الإجراء في EventTrigger ، خاصيه Trigger, أو DataTrigger.
يعرض الجدول التالي مواقع مختلفة من حيث يتم بدأ كل دعم تقنية Storyboard: لكل مثيل و نمط و قالب عنصر التحكم و قالب البيانات.
تبدأ لوحة العمل باستخدام... |
لكل مثيل |
النمط |
قوالب عنصر التحكم |
قالب البيانات |
المثال |
|---|---|---|---|---|---|
نعم |
نعم |
نعم |
نعم |
||
BeginStoryboard و خاصية Trigger |
لا |
نعم |
نعم |
نعم |
|
لا |
نعم |
نعم |
نعم |
||
أسلوب Begin: |
نعم |
لا |
لا |
لا |
لمزيد من المعلومات حول كائنات Storyboard، راجع نظرة عامة حول لوحات العمل.
محلي الحركه
الحركات المحليه توفر طريقة ملائمة لتحريك خاصيه تعتمد التبعية من أي Animatable الكائن. تستخدم الحركات المحلي عندما تريد تطبيق حركة واحدة إلى خاصية لا تحتاج إلى التحكم الحركة بشكل تفاعلي بعد بدء تشغيله. بعكس Storyboard الحركة, يمكنك تحريك حركة محلي كائن غير المقترنة FrameworkElement أو FrameworkContentElement. ليس لديك أيضاً تعريف NameScope لهذا النوع من الحركة.
يمكن استخدامها فقط في التعليمة البرمجية الحركات المحلي و لا يمكن تعريف في أنماط قوالب التحكم أو بيانات القوالب. اعدادات محليه يتعذر التحكم بشكل تفاعلي بعد بدء تشغيله.
لتحريك باستخدام حركة محلي ، أكمل الخطوات التالية.
إنشاء AnimationTimeline كائن.
استخدام BeginAnimation أسلوب للكائن الذي تريد تحريكه إلى تطبيق AnimationTimeline إلى خاصيه الذي تحدده.
يوضح المثال التالي كيفية تحريك عرض و لون الخلفية ل Button.
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
'''This sample demonstrates how to apply non-storyboard animations to a property.
'''To animate in markup, you must use storyboards.
'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
Imports System
Imports System.Windows
Imports System.Windows.Navigation
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports System.Windows.Controls
Namespace Microsoft.Samples.Animation.LocalAnimations
' Create the demonstration.
Public Class LocalAnimationExample
Inherits Page
Public Sub New()
WindowTitle = "Animate Property Example"
Dim myStackPanel As New StackPanel()
myStackPanel.Margin = New Thickness(20)
' Create and set the Button.
Dim aButton As New Button()
aButton.Content = "A Button"
' Animate the Button's Width.
Dim myDoubleAnimation As New DoubleAnimation()
myDoubleAnimation.From = 75
myDoubleAnimation.To = 300
myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
myDoubleAnimation.AutoReverse = True
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever
' Apply the animation to the button's Width property.
aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation)
' Create and animate a Brush to set the button's Background.
Dim myBrush As New SolidColorBrush()
myBrush.Color = Colors.Blue
Dim myColorAnimation As New ColorAnimation()
myColorAnimation.From = Colors.Blue
myColorAnimation.To = Colors.Red
myColorAnimation.Duration = New Duration(TimeSpan.FromMilliseconds(7000))
myColorAnimation.AutoReverse = True
myColorAnimation.RepeatBehavior = RepeatBehavior.Forever
' Apply the animation to the brush's Color property.
myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation)
aButton.Background = myBrush
' Add the Button to the panel.
myStackPanel.Children.Add(aButton)
Me.Content = myStackPanel
End Sub
End Class
End Namespace
/*
This sample demonstrates how to apply non-storyboard animations to a property.
To animate in markup, you must use storyboards.
*/
using System;
using System.Windows;
using System.Windows.Navigation;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Controls;
namespace Microsoft.Samples.Animation.LocalAnimations
{
// Create the demonstration.
public class LocalAnimationExample : Page
{
public LocalAnimationExample()
{
WindowTitle = "Local Animation Example";
StackPanel myStackPanel = new StackPanel();
myStackPanel.Margin = new Thickness(20);
// Create and set the Button.
Button aButton = new Button();
aButton.Content = "A Button";
// Animate the Button's Width.
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 75;
myDoubleAnimation.To = 300;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Apply the animation to the button's Width property.
aButton.BeginAnimation(Button.WidthProperty, myDoubleAnimation);
// Create and animate a Brush to set the button's Background.
SolidColorBrush myBrush = new SolidColorBrush();
myBrush.Color = Colors.Blue;
ColorAnimation myColorAnimation = new ColorAnimation();
myColorAnimation.From = Colors.Blue;
myColorAnimation.To = Colors.Red;
myColorAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(7000));
myColorAnimation.AutoReverse = true;
myColorAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Apply the animation to the brush's Color property.
myBrush.BeginAnimation(SolidColorBrush.ColorProperty, myColorAnimation);
aButton.Background = myBrush;
// Add the Button to the panel.
myStackPanel.Children.Add(aButton);
this.Content = myStackPanel;
}
}
}
/*
This sample demonstrates how to apply non-storyboard animations to a property.
To animate in markup, you must use storyboards.
*/
using namespace System;
using namespace System::Windows;
using namespace System::Windows::Navigation;
using namespace System::Windows::Media;
using namespace System::Windows::Media::Animation;
using namespace System::Windows::Shapes;
using namespace System::Windows::Controls;
namespace Microsoft {
namespace Samples {
namespace Animation {
namespace LocalAnimations {
// Create the demonstration.
public ref class LocalAnimationExample : Page {
public:
LocalAnimationExample ()
{
WindowTitle = "Local Animation Example";
StackPanel^ myStackPanel = gcnew StackPanel();
myStackPanel->Margin = Thickness(20);
// Create and set the Button.
Button^ aButton = gcnew Button();
aButton->Content = "A Button";
// Animate the Button's Width.
DoubleAnimation^ myDoubleAnimation = gcnew DoubleAnimation();
myDoubleAnimation->From = 75;
myDoubleAnimation->To = 300;
myDoubleAnimation->Duration = Duration(TimeSpan::FromSeconds(5));
myDoubleAnimation->AutoReverse = true;
myDoubleAnimation->RepeatBehavior = RepeatBehavior::Forever;
// Apply the animation to the button's Width property.
aButton->BeginAnimation(Button::WidthProperty, myDoubleAnimation);
// Create and animate a Brush to set the button's Background.
SolidColorBrush^ myBrush = gcnew SolidColorBrush();
myBrush->Color = Colors::Blue;
ColorAnimation^ myColorAnimation = gcnew ColorAnimation();
myColorAnimation->From = Colors::Blue;
myColorAnimation->To = Colors::Red;
myColorAnimation->Duration = Duration(TimeSpan::FromMilliseconds(7000));
myColorAnimation->AutoReverse = true;
myColorAnimation->RepeatBehavior = RepeatBehavior::Forever;
// Apply the animation to the brush's Color property.
myBrush->BeginAnimation(SolidColorBrush::ColorProperty, myColorAnimation);
aButton->Background = myBrush;
// Add the Button to the panel.
myStackPanel->Children->Add(aButton);
this->Content = myStackPanel;
};
};
}
}
}
}
حركه الساعه
استخدام Clock كائنات عندما تريد لتحريك بدون استخدام Storyboard وتريد لإنشاء أشجار توقيت معقدة أو بشكل تفاعلي التحكم الحركات بعد قيامهم البدء. يمكن استخدام كائنات الساعة لتحريك خاصيه تعتمد التبعية من أي Animatable الكائن.
لا يمكنك استخدام Clock الكائنات مباشرة لتحريك في الأنماط، التحكم القوالب، أو بيانات قوالب. (نظام الحركة توقيت فعلياً يستخدم Clock الكائنات إلى تحريك في أنماط التحكم القوالب، و بيانات قوالب ولكن عليك إنشاء تلك Clock كائنات من Storyboard. للحصول على مزيد من المعلومات عن الاختلافات بين الكائنات Storyboard و Clock ، راجع نظرة عامة على نظام الحركة و التوقيت.
تطبيق واحد Clock إلى خاصيه ، أكمل الخطوات التالية.
إنشاء AnimationTimeline كائن.
استخدام CreateClock أسلوب AnimationTimeline لإنشاء AnimationClock.
استخدام ApplyAnimationClock أسلوب للكائن الذي تريد تحريكه إلى تطبيق AnimationClock إلى خاصيه الذي تحدده.
يوضح المثال التالي كيفية إنشاء AnimationClock وتطبيقه لخاصيتين متشابهتين.
'
' This example shows how to create and apply
' an AnimationClock.
'
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Shapes
Imports System.Windows.Media.Animation
Namespace Microsoft.Samples.Animation.TimingBehaviors
Public Class AnimationClockExample
Inherits Page
Private myScaleTransform As ScaleTransform
Public Sub New()
Me.WindowTitle = "Opacity Animation Example"
Me.Background = Brushes.White
Dim myStackPanel As New StackPanel()
myStackPanel.Margin = New Thickness(20)
' Create a button that with a ScaleTransform.
' The ScaleTransform will animate when the
' button is clicked.
Dim myButton As New Button()
myButton.Margin = New Thickness(50)
myButton.HorizontalAlignment = HorizontalAlignment.Left
myButton.Content = "Click Me"
myScaleTransform = New ScaleTransform(1,1)
myButton.RenderTransform = myScaleTransform
' Associate an event handler with the
' button's Click event.
AddHandler myButton.Click, AddressOf myButton_Clicked
myStackPanel.Children.Add(myButton)
Me.Content = myStackPanel
End Sub
' Create and apply and animation when the button is clicked.
Private Sub myButton_Clicked(ByVal sender As Object, ByVal e As RoutedEventArgs)
' Create a DoubleAnimation to animate the
' ScaleTransform.
Dim myAnimation As New DoubleAnimation(1, 5, New Duration(TimeSpan.FromSeconds(5))) ' "To" value - "From" value
myAnimation.AutoReverse = True
' Create a clock the for the animation.
Dim myClock As AnimationClock = myAnimation.CreateClock()
' Associate the clock the ScaleX and
' ScaleY properties of the button's
' ScaleTransform.
myScaleTransform.ApplyAnimationClock(ScaleTransform.ScaleXProperty, myClock)
myScaleTransform.ApplyAnimationClock(ScaleTransform.ScaleYProperty, myClock)
End Sub
End Class
End Namespace
/*
This example shows how to create and apply
an AnimationClock.
*/
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
namespace Microsoft.Samples.Animation.TimingBehaviors
{
public class AnimationClockExample : Page
{
ScaleTransform myScaleTransform;
public AnimationClockExample()
{
this.WindowTitle = "Opacity Animation Example";
this.Background = Brushes.White;
StackPanel myStackPanel = new StackPanel();
myStackPanel.Margin = new Thickness(20);
// Create a button that with a ScaleTransform.
// The ScaleTransform will animate when the
// button is clicked.
Button myButton = new Button();
myButton.Margin = new Thickness(50);
myButton.HorizontalAlignment = HorizontalAlignment.Left;
myButton.Content = "Click Me";
myScaleTransform = new ScaleTransform(1,1);
myButton.RenderTransform = myScaleTransform;
// Associate an event handler with the
// button's Click event.
myButton.Click += new RoutedEventHandler(myButton_Clicked);
myStackPanel.Children.Add(myButton);
this.Content = myStackPanel;
}
// Create and apply and animation when the button is clicked.
private void myButton_Clicked(object sender, RoutedEventArgs e)
{
// Create a DoubleAnimation to animate the
// ScaleTransform.
DoubleAnimation myAnimation =
new DoubleAnimation(
1, // "From" value
5, // "To" value
new Duration(TimeSpan.FromSeconds(5))
);
myAnimation.AutoReverse = true;
// Create a clock the for the animation.
AnimationClock myClock = myAnimation.CreateClock();
// Associate the clock the ScaleX and
// ScaleY properties of the button's
// ScaleTransform.
myScaleTransform.ApplyAnimationClock(
ScaleTransform.ScaleXProperty, myClock);
myScaleTransform.ApplyAnimationClock(
ScaleTransform.ScaleYProperty, myClock);
}
}
}
لإنشاء شجرة توقيت استخدام خصائص الحركه ، أكمل الخطوات التالية.
استخدام ParallelTimeline و AnimationTimeline الكائنات لإنشاء شجرة توقيت.
استخدام CreateClock الجذر ParallelTimeline لإنشاء ClockGroup.
تكرار خلال Children من ClockGroup وتطبيق التابعة لها Clock كائن. بالنسبة لكل AnimationClock التابعة الاستخدام ApplyAnimationClock أسلوب للكائن الذي تريد تحريكه إلى تطبيق AnimationClock إلى خاصيه تحدده
لمزيد من المعلومات حول كائنات نظرة عامة على نظام الحركة و التوقيت، راجع .
لكل إطار حركه تجاوز حركة "و" نظام التوقيت
استخدم هذا الأسلوب عندما تحتاج الى تجاوز بالكامل WPF نظام الحركة. سيناريو واحد هذا الأسلوب هو الحركات physics حيث يتطلب كل خطوة في الحركة الكائنات ليمكن اعاده حسابه استناداً إلى المجموعة الأخيرة من تفاعلات الكائن.
لا يمكن تعريف حركات لكل إطار داخل أنماط قوالب عنصر التحكم أو بيانات قوالب.
بدلاً من ذلك، يمكنك تسجيل من أجل Rendering الحدث الكائن الذي يحتوي على الكائنات التي تريد تحريكها. يتم استدعاء هذا الأسلوب معالج الحدث مرة واحدة لكل إطار. كل مرة تقوم تلك WPF marshals البيانات الدائمة التقديم في شجرة المرئية عبر الى شجرة تركيب يتم استدعاء أسلوب معالج الأحداث الخاص بك.
في معالج "الأحداث" ، تنفيذ لديك مهم العمليات الحسابية الضرورية الخاصة بك الحركة التأثير وتعيين خصائص الكائنات الذي تريد تحريكه مع هذه القيم.
للحصول على وقت العرض التقديمي من الإطار الحالي EventArgs المقترنة معه يمكن أن يتم تحويل هذا الحدث كـ RenderingEventArgs ، التي توفر RenderingTime الخاصية التي يمكنك استخدامها للحصول على وقت التقديم الإطار الحالي.
لمزيد من المعلومات، راجع صفحة Rendering.