مشاركة عبر

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

  • مقالة

يصف هذا الموضوع سلوك التوقيت للحركات و كائنات Timelineالأخرى .

المتطلبات الأساسية

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

أنواع الخط الزمني

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

Clكـses التي يورث clكـs الفترة الزمنية توفر وظائف إضافى، مثل كـ تشغيل الحركة والوسائط. WPFيوفر ما يليTimelineأنواع.

نوع المخطط الزمني

الوصف

AnimationTimeline

الفئة الأساسية المجردة لـكائنات Timeline التي تنشئ قيم لتحريك الخصائص

MediaTimeline

ينشئ الإخراج من ملف وسائط.

ParallelTimeline

نوع من TimelineGroup تلك التى تجمع و تتحكم فى كائنات Timeline.

Storyboard

نوع من ParallelTimeline والتي توفر المعلومات المستدهفة من قبل المخطط الزمني.

Timeline

قاعدة الفئة المجردة التي تعرف سلوكيات التوقيت.

TimelineGroup

فئة مجردة من كائنات Timeline التي يمكن أن تحتوي كائنات Timelineأخرى .

الخصائص التى تتحكم فى طول المخطط الزمني

يمثل Timeline جزء من الوقت، و طول المخطط الزمني يمكن وصفه في طرق مختلفة. يعرّف الجدول التالي عدة مصطلحات لوصف طول المخطط الزمني.

المصطلح

الوصف

Properties

مدة بسيطة

طول الوقت الذى يأخذه المخطط الزمني لعمل تكرار مفرد إلى الأمام .

Duration

تكرار واحد

طول الوقت المستغرق لتشغيل المخطط الزمني للأمام مرة واحدة, إذا كانت خاصيةAutoReverse صحيحة، قم بالتشغيل للخلف مرة واحدة.

Duration, AutoReverse

الفترة النشطة

طول الوقت المستغرق بواسطة المخطط الزمني لإكمال كافة التكرارات المحددة بواسطة خاصيةRepeatBehavior.

Duration, AutoReverse, RepeatBehavior

خاصية المدة

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

يظهر المثال التالي DoubleAnimation مع Duration من خمس ثواني.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5"  />

حاوية الخطوط الزمنية ( كائنات Storyboard) ، مثل ParallelTimeline و Automatic لديهم مدة افتراضية إلى ، مما يعني أن ينتهوا تلقائياً عند إيقاف تشغيل آخر تابع لهم. يظهر المثال التالي Storyboard الذى له Duration يقوم بالحل إلى خمس ثوانٍ، مدة الوقت المستغرق لإكمال كافة كائنات DoubleAnimation التابعة لها.

<Storyboard >

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

بواسطة تعيين Duration للمخطط الزمني لحاوية الى قيمة TimeSpan ، يمكنك فرض التشغيل لمدة أطول أو أقصر من كائنات Timelineالتابعة لها. إذا قمت بتعيين Duration إلى قيمة أصغر من طول الفترة الزمنية لحاوية كائنات Timeline التابعة ،توقف كائنات Timeline التابعة التشغيل عندما تفعل حاوية المخطط الزمني. يقوم المثال التالي بإعداد Duration من Storyboard من الأمثلة السابقة الى ثلاث ثواني. كنتيجة ، يتوقف DoubleAnimation الأول التقدم بعد ثلاث ثواني عندما يحرك عرض المستطيل المستهدف إلى 60.

<Storyboard Duration="0:0:3">

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

خاصية RepeatBehavior

خاصية RepeatBehavior الخاخصة ب Timeline تتحكم بعدد مرات تكرار مدته البسيطة. باستخدام خاصية RepeatBehavior ، يمكنك تحديد عدد مرات تشغيل المخطط الزمني (تكرار Count) أو إجمالي طول الوقت الذى يجب تشغيله (تكرار Duration). في كلتا الحالتين، الحركة تنتقل خلال العديد من التشغيلات من البداية إلى النهاية التي تحتاج إليها لتعبئة العدد المطلوب أو المدة. بشكل افتراضي ، الخطوط زمنية يكون لها عدد تكرار من1.0 و مما يعني انه يعمل مرة واحدة و لا يتكرر أبدا.

يستخدم المثال التالي خاصية RepeatBehavior لجعل DoubleAnimation يشتغل لمدة بسيطة مرتين بواسطة تحديد عدد مرات التكرار.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2x" />

يستخدم المثال التالي خاصية RepeatBehavior لجعل DoubleAnimation يشتغلل نصف مدته البسيطة.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="0.5x" />

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

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="Forever" />

لمزيد من الأمثلة، راجع كيفية القيام بما يلي: تكرار رسم متحرك.

خاصية AutoReverse

تحدد خاصية AutoReverse ما إذا كان Timeline سيتم تشغيله في نهاية كل تكرار للأمام. يقوم المثال التالي بإعداد إلى خاصية AutoReverse للDoubleAnimation true; نتيجة لذلك، تتحريك من صفر إلى 100 ومن ثم من 100 إلى صفر. يت تشغيله إجمالي 10 ثوانى.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  AutoReverse="True" />

عند استخدام قيمة Count لتعيين RepeatBehavior من Timeline و خاصية AutoReverse التي Timeline يتم true ، تكرار واحد يتكون من أحد التكرارات إلى الأمام متبوعاً بتكرار للأمام. يقوم المثال التالي بإعداد RepeatBehaviorلل DoubleAnimation من المثال السابق الى Count من اثنين. كنتيجة ،يعمل DoubleAnimationلمدة 20 ثانية: إلى الأمام لمدة خمسة ثوانى ، إلى الخلف لمدة خمسة ثوانى ، للأمام لمدة 5 ثوانى مرة أخرى، ثم للخلف لمدة خمسة ثوانى.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2" 
  AutoReverse="True" />

إذا كان المخطط الزمني للحاوية لكائنات Timeline التابعة ، تنعكس عندما تفعل حاوية المخطط الزمني. لمزيد من الأمثلة، راجع كيفية القيام بما يلي: تحديد ما إذا كان الخط الزمني يعكس تلقائياً.

خاصية BeginTime

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

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

خاصية BeginTime مفيدة من أجل تقدير المخططات الزمنية. يقوم المثال التالي بإنشاء Storyboardالذى له كائنين DoubleAnimationتابعين. الحركة الأولى تحتوي على Duration من خمس ثواني، ويحتوي الثاني على Duration من "3 ثوان". يعين المثال BeginTime من DoubleAnimation الثاني الى 5 ثواني ، لذا فأنه يبدأ التشغيل بعد نهاية DoubleAnimation الأول.

<Storyboard>

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5" 
    BeginTime="0:0:0" />


  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  
    BeginTime="0:0:5" />

</Storyboard>

خاصية FillBehavior

عندما تصل Timeline إلى نهاية المدة النشطة الإجمالية ، تحدد خاصية FillBehaviorما إذا كان ذلك توقف أو تحتفظ بآخر قيمة. حركة مع FillBehavior من HoldEnd "تتضمن" قيمة الإخراج الخاص به: الخاصية التى يتم تحريكها تحتفظ بالقيمة الأخيرة من الحركة. قيمةStop تؤدي الى إيقاف حركة التأثير على الخاصية المستهدفة بعد أن ينتهي.

يقوم المثال التالي بإنشاء Storyboardالذى له كائنين DoubleAnimationتابعين. كلاهما DoubleAnimationتحريك الكائنات Widthمن Rectangleمن 0 إلى 100. Rectangleوجود عناصر غير متحركة Widthقيم 500 بكسل مستقلة عن جهاز .

<Rectangle Name="MyRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Red">
</Rectangle>

<Rectangle Name="MyOtherRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Orange">
</Rectangle>

<Button Content="Start FillBehavior Example">
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5" 
            FillBehavior="HoldEnd" />
          <DoubleAnimation 
            Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5"  
            FillBehavior="Stop" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

الخصائص التى تتحكم فى سرعة المخطط الزمني

توفر الفئةTimeline ثلاثة خصائص لتحديد سرعته:

راجع أيضًا:

المبادئ

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

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

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

موارد أخرى

مواضيع How-to الخاصة بالحركة و التوقيت

نموذج سلوك توقيت الحركة