نظرة عامة حول الحركة

Windows Presentation Foundation (WPF) توفر مجموعة قوية من ميزات التخطيط والرسومات التي تتيح لك إنشاء واجهات المستخدم و المستندات جذابة الحركة يمكن أن تجعل واجهة المستخدم جذابة وأكثر من ذلك مذهلة وقابلة للاستخدام. عن طريق تحريك لون الخلفية فقط أو تطبيق متحركة Transform ، يمكنك إنشاء مثير صواب الانتقالات أو توفير تلميح مرئي مساعد

هذه النظرة العامة توفر مقدمة عن الWPFحركة و نظام التوقيت. تركز على حركة WPF الأشياء باستخدام لوحة العمل

يشتمل هذا الموضوع على الأقسام التالية.

• تقديم الحركات
• WPF خاصية حركة النظام
• مثال: جعل عنصر يتلاشى للداخل والخارج من العرض.
• أنواع الحركة
• تطبيق حركة إلى خاصية
• التحكم في لوحة العمل بشكل تفاعلي
• ما الذي يحدث بعد انتهاء حركة؟
• ربط البيانات‬ وتحريك الحركات
• طرق أخرى للتحريك
• نماذج الحركة
• موضوعات ذات صلة

تقديم الحركات

الحركة هي الانطباع الذي يتم إنشاؤه عن طريق التدوير بسرعة عبر سلسلة من الصور كل واحدة مختلفة قليلاً عن الأخيرة. المخ يتصور مجموعة الصور كمنظر متغير واحد. في الفيلم ، يتم إنشاء هذا الانطباع باستخدام الكاميرات التي تسجل العديد من الصور الفوتوغرافية أو الإطارات، في كل ثانية. عندما يتم عرض الاطارات مرة أخرى بواسطة بروجيكتور، يشاهد الجمهور صورة متحركة.

الحركة على جهاز الكمبيوتر هي بالمثل. على سبيل المثال، البرنامج الذي يجعل رسمة مستطيل تتضاءل في العرض قد تعمل كما يلي.

• البرنامج يقوم بإنشاء عداد.

• البرنامج يفحص العداد في فواصل زمنية متعددة لمشاهدة مقدار الوقت المنقضي.

• في كل مرة البرنامج يفحص العداد , فإنه يحسب معدل الشفافية الحالي للمستطيل استناداً إلى مقدار الوقت المنقضي.

• البرنامج يقومم بتحديث المستطيل مع القيمة الجديدة و يرسمه عليه.

قبل إلى WPF ، Microsoft Windowsيجب على المطورين إنشاء و إدارة أنظمة التوقيت الخاصة بهم أو استخدام مكتبات خاصة. WPF يتضمن نظام توقيت جيد المكشوف من خلال تعليمات برمجية تمت إدارتها وExtensible Application Markup Language (XAML) المتكامل بدرجة كبيرة إلىWPF إطار العمل.WPF الحركة تجعلها تسهل تحريك عناصر التحكم و الأشياء المرسومة الأخرى.

WPF تقوم بمعالجة كافة ما وراء العمل من إدارة نظام توقيت و اعادة رسم الشاشة بشكل فعال. كما يوفر فئات الوقت التي تمكنك من إلى تركيز تشغيل التأثيرات التي تريدها إلى إنشاء، بدلاً من mechanics لتحقيق هذه التأثيرات. WPFأيضا إلى تسهيل إنشاء إسناد الحركات الخاصة بك بواسطة تعريض رسم متحرك فئات منها الفئات الخاصة بك أن يورث، لإعطاء رسم متحرك المخصصة. هذه الحركة المخصصة تحصل على العديد من فوائد أداء فئات الحركة القياسية.

WPF خاصية حركة النظام

إذا كنت تفهم بعض المفاهيم الهامة حول نظام التوقيت WPF يمكن أن تكون الحركات أكثر سهولة في الاستخدام أهم شيء هو،في WPF ، تقوم بتحريك الأشياء عن طريق تطبيق الحركة الخاصة بهم. على سبيل المثال، لجعل عنصر إطار العمل يكبر قم تحريك به Width و خصائص Height . لجعل شيء يختفي من العرض ، تقوم بتحريك به خاصية Opacity .

لخاصية ما للحصول على إمكانيات الحركة ، فإنه يجب أن تفي بالمتطلبات الثلاثة التالية:

• يجب أن يكون خاصية التبعية

• يجب أن تنتمي إلى فئة ترث من DependencyObject وتقوم بتنفيذ ال IAnimatable واجهة.

• يجب أن يكون هناك نوع حركة ملائم متوفر. (إذا Windows Presentation Foundation (WPF) لا يوفر واحد ، يمكنك اختراع الحركة الخاصة بك. راجع الـ نظرة عامة حول الحركة المخصصة

WPF يحتوي على العديد من الأشياء التي تحتوي على خصائص متحركة. تتحكم مثل Button و TabControl ، وأيضاً Panel و Shape الأشياء ترث من DependencyObject. معظم الخصائص بهم يكونوا خصائص التبعية.

يمكنك استخدام الحركات تقريبًا في أي مكان ، والتي تتضمن في قوالب التحكم والأنماط. الحركات لا يجب أن تكون مرئية ، يمكنك تحريك الأشياء التي ليست جزءاً من واجهة المستخدم طالما أنها تفي بالمعايير الموضحة في هذا المقطع.

مثال: جعل عنصر يتلاشى للداخل والخارج من العرض.

يوضح هذا المثال كيفية استخدام WPF الحركة لتحريك قيمة خاصية التبعية. يستخدم DoubleAnimation ، والذي هو أحد أنواع الحركة الذي يقوم بإنشاء Double قيم لتحريك Opacity خاصية من Rectangle. كنتيجة ،الRectangleبتلاشى للداخل والخارج من العرض.

ينشئ الجزء الأول من المثالRectangleعنصر ويعرضها فيPage. الخطوات التالية تظهر كيفية إنشاء حركة وتطبيقها إلى خاصية المستطيل Opacity .

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">
    
    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
    </Rectangle> 
  </StackPanel>
</Page>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace Microsoft.SDK.Animation
{
    public class RectangleOpacityFadeExample : Page
    {
        public RectangleOpacityFadeExample()
        {
            NameScope.SetNameScope(this, new NameScope());
            this.WindowTitle = "Fading Rectangle Example";
            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);
            
            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;
            myPanel.Children.Add(myRectangle);
            this.Content = myPanel; 
        }
    }
}

الجزء 1: انشاء حركة مزدوجة.

إحدى الطرق لجعل عنصر يتلاشى للداخل والخارج من العرض هي تحريك خاصيته Opacity . لأن الخاصيةOpacityهي من نوع Double تحتاج حركة التي تنتج قيم مزدوجة. DoubleAnimationهو أحد مثل حركة. DoubleAnimation ينشيء انتقال بين اثنين قيم مزدوجة. لتحديد قيمة البداية تقوم بتعيين خاصيةFrom لتحديد قيمة النهاية تقوم بتعيين خاصيةTo

1. قيمة الشفافية من1.0 تجعل الكائن ظاهر بشكل كامل و قيمة الشفافية من0.0 تجعله بشكل كامل غير مرئي. لجعل الحركة تنتقل من1.0 إلى0.0تقوم بتعيين به خاصيةFrom إلى1.0 و به خاصيةTo إلى0.0.

   ...
   <DoubleAnimation From="1.0" To="0.0"  />        
   ...
   

   [#C]

   DoubleAnimation myDoubleAnimation = new DoubleAnimation();
   myDoubleAnimation.From = 1.0;
   myDoubleAnimation.To = 0.0;
   

2. التالي ،عليك تعيين Duration. الDurationلحركة ما يحدد المدة التي تأخذها الحركة للانتقال من قيمة البداية الخاصة بها إلى قيمة النهاية الخاصة بها. في المثال التالي ، الحركة معطاه لمدة خمس ثوان.

   ...
   <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />        
   ...
   
   myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
   

3. البرنامج السابق يوضح حركة ما التي تنقل من1.0الى0.0،الذي يتسبب في العنصر الهدف أن يتغير من ظهور كامل الى اختفاء كامل. لجعل عنصر يتضاءل في الظهور مرة أخرى في العرض بعد أن يتلاشى، قم بتعيين خاصيةAutoReverse من الحركة إلىtrue. لجعل الحركة تتكرر بشكل غير محدود، قم بتعيين خاصيةRepeatBehavior إلىForever.

   ...
   <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>        
   ...
   
   myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
   myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
   

الجزء 2: انشاء لوحة العمل

لتطبيق حركة على كائن، أو إنشاءStoryboard واستخدم الخصائص المرفقةTargetName وTargetProperty  لتحديد الكائن و الخاصية للتحريك.

1. قم بانشاء الStoryboard وإضافة الحركة كالفرع الخاص به.

   ...
   <Storyboard>
     <DoubleAnimation
       From="1.0" To="0.0" Duration="0:0:1" 
       AutoReverse="True" RepeatBehavior="Forever" />
   </Storyboard>
   ...
   

   في البرنامج ،قم بتعريف الStoryboard كعضو للفئة.

   public class RectangleOpacityFadeExample : Page
   { 
       private Storyboard myStoryboard;
   

   ثم تهيئة الStoryboard و اضافة الحركة كالفرع الخاص به.

   myStoryboard = new Storyboard();
   myStoryboard.Children.Add(myDoubleAnimation);
   

2. الStoryboard يجب أن يعرف مكان تطبيق الحركة. استخدم الخاصية المرفقةStoryboard.TargetName لتحديد الكائن للتحريك. في البرنامج التالي، الDoubleAnimation معطى له اسم مهدف منMyRectangle ، والذي هو اسم الكائن للتحريك.

   ...
   <Storyboard>
     <DoubleAnimation
       Storyboard.TargetName="MyRectangle" 
       From="1.0" To="0.0" Duration="0:0:1" 
       AutoReverse="True" RepeatBehavior="Forever" />
   </Storyboard>
   ...
   
   Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
   

   ملاحظة

   عند إنشاء لوحة العمل في البرنامج ، يجب إجراء خطوتين إضافيتين: إنشاء اسم النطاق وتسجيل اسم الكائن للتحريك.البرنامج في بداية هذا المقطع الذي يقوم بإنشاء الصفحة و المستطيل أيضاً يعرفNameScopeويسجل اسماً للمستطيل.استخدم الSetNameScope أسلوب لإنشاءNameScope إذا واحد غير موجودة مسبقاً.استخدم الRegisterNameأسلوب لتسجيل اسم الكائن الهدف مع العنصر الذي قمت بإنشائهNameScope.وإلا، الStoryboardيتعذر في العثور على الكائن لتحريكه.لمزيد من الأمثلة، راجع كيفية القيام بما يلي: تعريف نطاق اسم.

3. استخدم الخاصية المرفقةTargetProperty لتحديد الخاصية للتحريك. في التعليمة البرمجية التالية، يتم تكوين الحركة لاستهداف الخاصيةOpacity منRectangle.

<BeginStoryboard>
  <Storyboard>
    <DoubleAnimation
      Storyboard.TargetName="MyRectangle" 
      Storyboard.TargetProperty="Opacity"
      From="1.0" To="0.0" Duration="0:0:5" 
      AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
</BeginStoryboard>

Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

للحصول على مزيد من المعلومات حولTargetPropertyبناء الجملة و أمثلة إضافية، راجع النظرة عامة حول لوحات العمل.

الجزء XAML) 3): إقران لوحة العمل مع مشغّل

إن أسهل طريقة لتطبيق وبدءStoryboard في XAML هو استخدام مشغّل الحدث.

قم بانشاءBeginStoryboard كائن واقرن معه لوحة العمل الخاصة بك. BeginStoryboardهو نوع منTriggerActionالذي يتم تطبيق وبدءStoryboard.

<BeginStoryboard>
  <Storyboard>
    <DoubleAnimation
      Storyboard.TargetName="MyRectangle" 
      Storyboard.TargetProperty="Opacity"
      From="1.0" To="0.0" Duration="0:0:5" 
      AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
</BeginStoryboard>

قم بانشاءEventTriggerو أضفBeginStoryboardإلى مجموعتهActions قم بتعيين الخاصيةRoutedEvent من الEventTrigger إلى ال توجيه الحدثالذي تريد بدء الStoryboard. للحصول على المزيد من المعلومات حول الأحداث الموجهة، راجع النظرة عامة حول الأحداث الموجهة.

<!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
  <BeginStoryboard>
    <Storyboard>
      <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
  </BeginStoryboard>
</EventTrigger>

قم باضافة الEventTriggerالى الTriggers مجموعة من المستطيل.

<Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>
    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

الجزء 3 (تعليمات برمجية): إقران لوحة العمل مع معالج الأحداث

إن أسهل طريقة لتطبيق وبدءStoryboard في التعليمات البرمجية هو استخدام معالج الأحداث.

1. سجل من أجل الLoaded حدث فيما يتعلق بالمستطيل.

   [#C]

   myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
   

2. قم بتعريف معالج الأحداث. في معالج الأحداث ، استخدام الBeginطريقة لتطبيق لوحة العمل.

   [#C]

   ...
   public void myRectangleLoaded(object sender, RoutedEventArgs e)
   {
       myStoryboard.Begin(this);
   }
   ...
   

مثال كامل

يظهر المثال التالي التعليمات البرمجية الكاملة عن إنشاء مستطيل يتلاشى للداخل والخارج من العرض.

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">
    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
      <Rectangle.Triggers>
        <!-- Animates the rectangle's opacity. -->
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="MyRectangle" 
                Storyboard.TargetProperty="Opacity"
                From="1.0" To="0.0" Duration="0:0:5" 
                AutoReverse="True" RepeatBehavior="Forever" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
  </StackPanel>
</Page>

Imports Microsoft.VisualBasic
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Shapes
Imports System.Windows.Media
Imports System.Windows.Media.Animation

Namespace SDKSample

    Public Class RectangleOpacityFadeExample
        Inherits Page
        Private myStoryboard As Storyboard

        Public Sub New()
            NameScope.SetNameScope(Me, New NameScope())

            Me.WindowTitle = "Fading Rectangle Example"
            Dim myPanel As New StackPanel()
            myPanel.Margin = New Thickness(10)

            Dim myRectangle As New Rectangle()
            myRectangle.Name = "myRectangle"
            Me.RegisterName(myRectangle.Name, myRectangle)
            myRectangle.Width = 100
            myRectangle.Height = 100
            myRectangle.Fill = Brushes.Blue

            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 1.0
            myDoubleAnimation.To = 0.0
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))
            myDoubleAnimation.AutoReverse = True
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

            myStoryboard = New Storyboard()
            myStoryboard.Children.Add(myDoubleAnimation)
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)
            Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

            ' Use the Loaded event to start the Storyboard.
            AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

            myPanel.Children.Add(myRectangle)
            Me.Content = myPanel
        End Sub

        Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
            myStoryboard.Begin(Me)
        End Sub

    End Class
End Namespace

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace SDKSample
{

    public class RectangleOpacityFadeExample : Page
    {
        private Storyboard myStoryboard;

        public RectangleOpacityFadeExample()
        {
            NameScope.SetNameScope(this, new NameScope());

            this.WindowTitle = "Fading Rectangle Example";
            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);

            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 1.0;
            myDoubleAnimation.To = 0.0;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

            // Use the Loaded event to start the Storyboard.
            myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);  

            myPanel.Children.Add(myRectangle);
            this.Content = myPanel;
        }

        private void myRectangleLoaded(object sender, RoutedEventArgs e)
        {
            myStoryboard.Begin(this);
        }

    }
}

أنواع الحركة

لأن الحركات تعطي خصائص للقيم، الأنواع المختلفة للحركة موجودة للأنواع المختلفة للخصائص. لتحريك الخاصية التي تأخذDouble ، مثل الWidthخاصية العنصر،استخدم الحركة التي تنتجDouble قيم. لتحريك الخاصية التي تأخذPointاستخدم الحركة التي تنتج Point القيم، وهكذا. بسبب عدد اختلافات انواع الخصائص ،توجد عدة فئات للحركة في الSystem.Windows.Media.Animation مساحة الاسم. ولحسن الحظ، يتتبعوا اتفاقية تسمية صارمة التي تسهل التمييز بينهم:

• <نوع >حركة

  تعرف على أنها حركة"من/الى/بواسطة" أو "أساسية"،هذه تحرك بين قيمة البدء وقيمة النهاية، أو عن طريق إضافة قيمة إزاحة على قيمة البداية الخاصة بها.

  • لتحديد قيمة بداية،قم بتعيين خاصية ال"من" من الحركة.

  • لتحديد قيمة نهاية،قم بتعيين خاصية ال"إلى" من الحركة.

  • لتحديد قيمة ازاحة ،قم بتعيين خاصية ال"بواسطة" من الحركة.

  الأمثلة الموجودة في هذه النظرة العامة تستخدم هذه الحركات، لأنها الأبسط في الاستخدام. يتم وصف الحركات "من/الى/بواسطة" بالتفصيل في النظرة عامة لحركات من/إلى/حيث.

• <نوعAnimationUsingKeyFrames

  حركات مفتاح الإطار أكثر فاعلية من حركات "من/الى/بواسطة" لأنه يمكنك تحديد أي عدد من القيم الهدف و حتى التحكم في أسلوب التداخل الخاصة بهم. بعض الأنواع يمكن فقط أن تتحرك بواسطة حركات مفتاح الإطار. حركات مفتاح الإطار مشروحة بالتفصيل في النظرة عامة حول حركات إطار المفتاح.

• < نوعAnimationUsingPath

  حركات المسار تتيح لك فرصة استخدام مسار هندسي من أجل إنتاج قيم المتحركة.

• < نوعحركة أساس

  مجرد الفئة التي عند تنفيذها, تحرك نوع > قيمة. هذه الفئة تخدم كفئة أساسية لـ نوع > حركة و نوعحركة باستخدام فئات مفتاح الاطارات. يجب التعامل مباشرة مع هذه الفئات فقط إذا كنت تريد إنشاء الحركة الخاصة بك. وغير ذلك، استخدم نوع> حركة أو مفتاح اطار نوعحركة.

في معظم الحالات، سوف تريد استخدام ال نوعفئات الحركة، مثلDoubleAnimationوColorAnimation.

الجدول التالي يعرض عدة أنواع حركة شائعة وبعض الخصائص التي يتم استخدامها معها.

نوع الخاصية	المقابلة الأساسية حركة(من/الى/بواسطة)	حركة مفتاح إطار المطابق	حركة المسار المطابق	مثال للاستخدام:
Color	ColorAnimation	ColorAnimationUsingKeyFrames	لا يوجد	تحريك الColorمنSolidColorBrushأوGradientStop.
Double	DoubleAnimation	DoubleAnimationUsingKeyFrames	DoubleAnimationUsingPath	تحريك الWidth من DockPanel أو ال Height من Button.
Point	PointAnimation	PointAnimationUsingKeyFrames	PointAnimationUsingPath	تحريك الCenter موضع من EllipseGeometry.
String	لا يوجد	StringAnimationUsingKeyFrames	لا يوجد	تحريك الText من TextBlock أو ال Content من Button.

الحركات هي الجداول الزمنية

ترث كافة أنواع الحركة من الTimelineفئة، لذلك، كافة الحركات هي أنواع خاصة من الجداول الزمنية. Timeline يعرّف قطعة من الوقت. يمكنك تحديد ال سلوكيات التوقيت من الخط الزمني: Duration به ،عدد المرات التي كان بها متكرر, و حتى سرعة تقدم الوقت به.

لأن الحركة هيTimeline ، أيضاً تمثل جزء من الوقت. و أيضاً الحركة تحسب قيم الإخراج خلال تقدمه مع تحديد مقطع من الوقت (أو Duration). كما الحركة تتقدم ، أو "تشغل" ، فإنه يقوم بتحديث الخاصية المقرنة بها.

فهناك ثلاث خصائص توقيت المستخدمة بشكل متكرر هي Duration و AutoReverse ، و RepeatBehavior.

خاصية المدة

كما سبق ذكره، الخط الزمني يمثل جزء من الوقت. يتم تحديد طول هذا المقطع بواسطة الDuration من الخط الزمني ،التي يتم تحديدها غالباً باستخدام قيمة TimeSpan عندما يصل الخط الزمني إلى نهاية المدة ،فانه أكمل تكرار.

الحركة تستخدم خاصيتهاDurationلتحديد قيمتها الحالية. إذا لم تحدد قيمةDurationبالنسبة للحركة، يستخدم ثانية واحدة و هو الافتراضي.

يظهر بناء الجملة التالي إصداراً مبسطاً من السمةExtensible Application Markup Language (XAML)بناء الجملة للخاصية Duration

ساعات:دقائق:ثواني

يعرض الجدول التالي عدة Duration إعدادات و القيم الناتجة الخاصة بهم.

الإعداد	القيمة الناتجة
0:0:5.5	5.5 ‎ثانية
0:30:5.5	30 دقيقة و5.5 ثانية.
1:30:5.5	1 ساعة و 30 دقيقة و 5.5 ثانية.

طريقة واحدة لتحديدDuration في التعليمة البرمجية هي استخدام الأسلوبFromSeconds لإنشاء TimeSpan ،ثم إعلان بنية جديدة Durationباستخدام هذاTimeSpan.

للحصول على مزيد من معلومات حول قيمDuration وإكمال بناء الجملة Extensible Application Markup Language (XAML) راجع الDuration نوع الصفحة.

عكس آلي

الخاصيةAutoReverseتحدد إذا كان تشغيل الخط الزمني للخلف بعد الوصول إلى نهاية الDuration. إذا قمت بتعيين خاصية هذه الحركة إلىtrue ، تنعكس الحركة بعد الوصول إلى النهاية به Duration و تشغل من قيمة النهاية الخاصة بها إلى قيمة البداية الخاصة بها. بشكل افتراضي ,هذه الخاصية هيfalse.

تكرار السلوك

الخاصيةRepeatBehaviorتحدد عدد مرات تشغيل الخط الزمني. بشكل افتراضي ، الخطوط زمنية يكون لها عدد تكرار من1.0 و مما يعني انه يعمل مرة واحدة و لا يتكرر أبدا.

ولمزيد من المعلومات حول هذه الخصائص، راجع نظرة عامة على سلوك التوقيتTiming Behaviors Overview.

تطبيق حركة إلى خاصية

تصف الأقسام السابقة أنواع مختلفة من الحركات و خصائص توقيتهم. يظهر هذا مقطع كيفية إلى يطبق رسم متحرك إلى الخاصية التي تريد إلى تحريك. Storyboardالكائنات توفر طريقة واحدة لتطبيق حركة إلى خصائص. Storyboard هوحاوية الخط الزمني التي توفر معلومات هادفة عن الحركات الموجودة به.

استهداف كائنات وخصائص

الفئة StoryboardتوفرTargetName و الخصائص المرفقة TargetProperty . بتعيين هذه الخصائص على حركة، تقوم بتعريف الحركة ماذا تحرك. ومع ذلك، قبل أن يمكن توجيه حركة الى كائن ،يجب عادةً توفير للكائن اسم.

تعيين اسم إلى FrameworkElement يختلف من تعيين اسم إلى الكائن Freezable. معظم عناصر التحكم و اللوحات هي عناصر إطار العمل، ومع ذلك، معظم الكائنات الرسومية تماماً مثل الفرشاة و التحويلات و الأشكال هندسية هي كائنات مجمدة. إذا لم تكن متأكداً إذا كان نوع هو FrameworkElement أو Freezable ، يشير إلى توريث التسلسل الهرمي مقطع من نوع صفحته.

• لجعل FrameworkElementحركة هدفا، قم بإعطاء اسم لها باعداد خاصيتها Name في التعليمات البرمجية ، يجب عليك أيضاً استخدام الأسلوبRegisterName لتسجيل اسم العنصر مع الصفحة التي ينتمي إليها.

• لجعلالكائنFreezable هدف الحركة فيXAML ، استخدم ال س: اسم السمة لتعيين له اسم. في التعليمات البرمجية، يمكنك فقط استخدام الأسلوب RegisterNameلتسجيل الكائن مع الصفحة التي ينتمي إليها.

توفر المقاطع التالية مثال تسمية عنصر في XAML و تعليمات برمجية. للحصول على مزيد من المعلومات حول التسمية و الاستهداف ، راجع نظرة عامة حول لوحات العمل.

تطبيق و بدء لوحة العمل

لبدء لوحة العمل فيXAML ،قم بإقرانه مع EventTrigger. EventTrigger عبارة عن كائن يوضح الإجراءات التي يجب اتخاذها عند حدوث حدث محدد. يمكن أن تكون أحد هذه الإجراءات ، ‎ الإجراءBeginStoryboard الذي يمكنك استخدامه لبدء تشغيل لوحة العمل. مشغلات الحدث تشبه في المفهوم لمعالجات الأحداث لأنها تتيح لك تحديد كيفية استجابة التطبيق الخاص بك الى حدث معين. بعكس معالجات الأحداث، مشغلات الحدث يمكن وصفها بشكل كامل فيXAML، لا يوجد تعليمات برمجية أخرى مطلوبة.

لبدء Storyboard في التعليمات البرمجية، يمكنك استخدام EventTrigger أو استخدام الأسلوب Beginأسلوب من الفئة Storyboard.

التحكم في لوحة العمل بشكل تفاعلي

المثال السابق أوضح لنا كيفية بدءStoryboard عند حدوث حدث ما. يمكنك أيضاً بشكل تفاعلي التحكم فيStoryboard بعد بدء تشغيله: يمكنك إيقاف مؤقتاً، استئناف ، إيقاف ، التقدم إلى فترة التعبئة الخاصة به, البحث و إزالة ال Storyboard. لمزيد من المعلومات وللحصول على مثال يوضح كيفية التحكم بشكل تفاعلي فيStoryboard, راجع نظرة عامة حول لوحات العمل.

ما الذي يحدث بعد انتهاء حركة؟

الخاصيةFillBehavior تحدد كيفية تصرف الخط الزمني عندما ينتهي. ‏‫افتراضياً، يبدأ الخط الزمني Filling عندما ينتهي. حركة التي هي Filling تحتفظ بقيمة الإخراج النهائي الخاص بها.

DoubleAnimation في المثال السابق لا ينتهي لأن الخاصية الخاصة به RepeatBehavior معينة الى Forever. المثال التالي يقوم بتحريك مستطيل باستخدام حركة مشابهة. بعكس المثال السابق الخصائص RepeatBehavior و AutoReverse من هذه الحركة يتم تركهم بالقيم الافتراضية الخاصة بهم. لذلك، تتقدم الحركة من 1 إلى 0 خلال خمس ثوان ثم تتوقف.

<Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>

    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0" Duration="0:0:5" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 1.0
            myDoubleAnimation.To = 0.0
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

لأن FillBehavior لم يتم تغييره من قيمته الافتراضية التي هي HoldEnd ، الحركة تحتفظ بالقيمة النهائية الخاصة بها 0, عندما تنتهي. لذلك، الOpacityالذي للمستطيل يبقى عند 0 بعد انتهاء الحركة. إذا قمت بتعيين ال Opacityالذي للمستطيل إلى قيمة أخرى، التعليمات البرمجية سوف تبدو أن ليس لها أي تأثير، لأن الحركة تستمر في التأثير على الخاصية Opacity.

طريقة واحدة ليمكنك التحكم في خاصية متحركة مرة أخرى في التعليمة البرمجية هي استخدام الأسلوب BeginAnimation وتحديد خال "null" للحصول على المعلمة AnimationTimeline. لمزيد من المعلومات وللحصول على مثال راجع كيفية القيام بما يلي: تعيين خاصية بعد تحريكها بلوحة العمل.

لاحظ أنه ، بالرغم من أن إعداد قيمة للخاصية التي تحتوي على حركة Active أو Filling يبدو أن ليس لها أي تأثير،قيمة الخاصية تتغير. لمزيد من المعلومات، راجع نظرة عامة على نظام الحركة و التوقيت.

ربط البيانات‬ وتحريك الحركات

يمكن أن تكون معظم خصائص الحركة بيانات مرتبطة أو متحركة، على سبيل المثال، يمكنك تحريك الخاصية Duration من DoubleAnimation. ومع ذلك، وبسبب الطريقة التي يعمل بها نظام التوقيت، البيانات المرتبطة أو الحركات المتحركة لا تسلك مثل البيانات المرتبطة الأخرى أو الكائنات المتحركة. لفهم سلوكياتهم، ويساعد على فهم ما يعني لتطبيق حركة إلى خاصية.

ارجع الى المثال في المقطع السابق الذي أوضح لنا كيفية تحريك ال Opacity من المستطيل. عند تحميل المستطيل في المثال السابق، مشغّل الحدث الخاص به يطبق ال Storyboard. نظام التوقيت ينشيء نسخة من ال Storyboardو الحركة الخاصة به. يتم تجميد هذه النسخ (صنع للقراءة فقط) و كائنات Clockتم إنشاءها لهم. هذه الساعات تقوم بالعمل الفعلي من تحريك الخصائص المستهدفة.

ينشئ نظام التوقيت ساعة لل DoubleAnimation ويتم تطبيقها على الكائن و الخاصية المحددة بواسطة ال TargetName و TargetProperty من ال DoubleAnimation. في هذه الحالة، يطبق نظام التوقيت الساعة الى الخاصية Opacity للكائن الذي يسمى "MyRectangle."

على الرغم من أنه يتم أيضاً إنشاء ساعة لل Storyboard ، لا يتم تطبيق الساعة الى أي خصائص. الغرض منها التحكم بالساعة التابعة لها، الساعة التي تم إنشاؤها للـ DoubleAnimation.

للحصول على حركة لتعكس ربط البيانات أو تغيير الحركة، يجب إعادة إنشاء الساعة الخاصة به. الساعات لا يتم إعادة إنشاءها لك تلقائياً. لجعل انعكاس الحركة يتغير ،قم بإعادة تطبيق لوحة العمل الخاصة بها باستخدام BeginStoryboard أو الأسلوب Begin. عند استخدام أي من هذه الطرق، يعاد تشغيل الحركة. في التعليمة البرمجية ، يمكنك استخدام الأسلوب Seek لإزاحة لوحة العمل إلى الموضع السابق لها.

للحصول على مثال حركة ربط البيانات ، راجع نموذج حركة "مفتاح الشريحة". للحصول على مزيد من المعلومات حول الحركة وعمل نظام التوقيت، راجع نظرة عامة على نظام الحركة و التوقيت.

طرق أخرى للتحريك

توضح الأمثلة في هذه النظرة العامة كيفية التحريك باستخدام لوحة العمل. عند استخدام رمز، يمكنك التحريك بعدة طرق أخرى. لمزيد من المعلومات، راجع نظرة عامة حول أساليب تحريك الخاصية.

نماذج الحركة

النماذج التالية يمكن أن تساعدك في بدء إضافة حركة الى التطبيقات الخاصة بك.

• يوضح إعدادات مختلفة من/إلى/بواسطة.

• يوضح الطرق المختلفة التي يمكنك التحكم في سلوك توقيت الحركة. هذا النموذج يوضح أيضا كيفية ربط بيانات قيمة وجهة لحركة.

راجع أيضًا:

المرجع

Timeline

Storyboard

المبادئ

نظرة عامة لحركات من/إلى/حيث

نظرة عامة حول حركات إطار المفتاح

نظرة عامة حول لوحات العمل

نظرة عامة على سلوك التوقيت

نظرة عامة على نظام الحركة و التوقيت

نظرة عامة حول أحداث التوقيت

الشروع في استخدام WPF