نظرة عامة حول حركات إطار المفتاح
يقدم هذا الموضوع لك حركات إطار المفتاح. حركات إطار المفتاح تتيح لك التحريك باستخدام أكثر من قيمتين الهدف و التحكم بأسلوب الاستنتاج للحركة.
يشتمل هذا الموضوع على الأقسام التالية.
المتطلبات الأساسية
باستخدام حركات إطار المفتاح
مواضيع ذات صلة
المتطلبات الأساسية
لفهم هذه النظرة العامة, يجب أن تكون على دراية بحركات Windows Presentation Foundation (WPF) و المخططات الزمنية. للحصول على مقدمة إلى الحركات، راجع نظرة عامة حول الحركة. كما يساعد أن تكون على دراية بالحركات من/إلى/بواسطة. لمزيد من المعلومات، راجع نظرة عامة لحركات من/إلى/حيث.
ما هي حركة إطار المفتاح ؟
مثل حركة من/إلى/بواسطة, حركة إطار المفتاح تقوم بتحريك قيمة خاصية الهدف. تقوم بإنشاء انتقال بين قيم الهدف الخاصة به عبر Duration الخاص به. ومع ذلك، بينما تنشئ حركة من/إلى/بواسطة انتقال بين قيمتين, يمكن لحركة إطار المفتاح إنشاء انتقالات بين أي عدد من قيم الهدف. بعكس حركة من/إلى/بواسطة, حركة إطار المفتاح ليس لديها خصائص من, إلى أو بواسطة حيث يجب تعيين قيم الهدف الخاصة به. قيم الهدف الخاصة بحركة إطار المفتاح يتم وصفها باستخدام كائنات إطارات المفتاح (و بالتالي المصطلح ، "حركة إطار المفتاح"). لتحديد قيم الهدف الخاصة بالحركة, قم بإنشاء كائنات إطار المفتاح و اضفهم إلى مجموعة KeyFrames الخاصة بالحركة. عند تشغيل الحركة, يتم الانتقال بين الإطارات التي قمت بتحديدها.
بالإضافة إلى دعم عدة قيم الهدف ، بعض أساليب إطار المفتاح حتى يدعم أساليب الاستنتاج المتعددة. يعرّف أسلوب الاستنتاج للحركة كيفية الانتقال من قيمة واحدة إلى التالية. وهناك ثلاثة أنواع من الاستنتاج: منفصل خطي، و splined .
لتحريك حركة إطار المفتاح ، أكمل الخطوات التالية.
قم بتعريف الحركة و حدد Duration الخاص به، مثلما تفعل لحركة من/إلى/بواسطة.
لكل قيمة هدف, قم بإنشاء إطار مفتاح من النوع المناسب, قم بتعيين القيمة الخاصة به و KeyTime ، و قم بإضافته إلى مجموعة KeyFramesالخاصة بالحركة.
قم بإقران الحركة مع الخاصية، مثلما تفعل مع حركة من/إلى/بواسطة. للحصول على مزيد من المعلومات حول تطبيق حركة إلى خاصية باستخدام لوحة العمل، راجع نظرة عامة حول لوحات العمل.
يستخدم المثال التالي DoubleAnimationUsingKeyFrames لتحريك عنصر Rectangle إلى أربعة مواقع مختلفة.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
WindowTitle="KeyFrame Animations">
<Border Width="400" BorderBrush="Black">
<Rectangle Fill="Blue"
Width="50" Height="50"
HorizontalAlignment="Left">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from 0 to 350, then 50,
then 200 over 10 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Border>
</Page>
مثل حركة من/إلى/بواسطة، يمكن تطبيق حركة إطار المفتاح إلى خاصية باستخدام Storyboard في العلامات و التعليمات البرمجية أو عن طريق استخدام أسلوب BeginAnimation في التعليمات البرمجية. يمكنك أيضاً استخدام حركة إطار المفتاح لإنشاء AnimationClock و تطبيقه إلى واحد أو أكثر من الخصائص. لمزيد من المعلومات حول أساليب تطبيق الحركات, راجع نظرة عامة حول أساليب تحريك الخاصية.
أنواع حركة إطار المفتاح
لأن الحركات تعطي قيم خصائص ، توجد أنواع مختلفة للحركة للأنواع المختلفة من الخصائص. لتحريك الخاصية التي تأخذ Double (مثل خاصية Width للعنصر)، استخدم الحركة التي تنتج قيم Double. لتحريك الخاصية التي تأخذ Point, استخدم الحركة التي تنتج القيم Point وهكذا.
تنتمي فئات حركة إطار مفتاح إلى مساحة اسم System.Windows.Media.Animation و تلتزم لاصطلاح التسمية التالي:
*<النوع>*AnimationUsingKeyFrames
حيث <النوع> هو نوع القيمة التي تقوم الفئة بتحريكها.
WPF يوفر فئات حركة إطار المفتاح التالية.
نوع الخاصية |
فئة الحركة (من/إلى/بواسطة) المقابلة |
أساليب الاستنتاج المدعمة |
|---|---|---|
منفصلة |
||
منفصلة أو خطي أو Splined |
||
منفصلة أو خطي أو Splined |
||
منفصلة أو خطي أو Splined |
||
منفصلة أو خطي أو Splined |
||
منفصلة أو خطي أو Splined |
||
منفصلة أو خطي أو Splined |
||
منفصلة أو خطي أو Splined |
||
منفصلة |
||
منفصلة |
||
منفصلة أو خطي أو Splined |
||
منفصلة أو خطي أو Splined |
||
منفصلة أو خطي أو Splined |
||
منفصلة أو خطي أو Splined |
||
منفصلة أو خطي أو Splined |
||
منفصلة |
||
منفصلة أو خطي أو Splined |
||
منفصلة أو خطي أو Splined |
||
منفصلة أو خطي أو Splined |
||
منفصلة أو خطي أو Splined |
قيم الهدف (إطارات المفتاح) و أوقات المفتاح
تماماً كما توجد أنواع مختلفة من حركات إطار المفتاح لتحريك أنواع الخاصية المختلفة، يوجد أيضًا أنواع مختلفة من كائنات إطار المفتاح: واحد لكل نوع من القيمة المتحركة و أسلوب الاستنتاج المدعم. تلتزم أنواع إطار المفتاح إلى اصطلاح التسمية التالي:
*< InterpolationMethod > < نوع >*KeyFrame
بينما < InterpolationMethod> هو أسلوب الاستنتاج الذي يستخدمه إطار المفتاح و <نوع> هو نوع الفئة التي تحريكها الفئة. حركة إطار المفتاح التي تدعم أساليب الاستنتاج الثلاثة سيكون لديها ثلاثة أنواع من إطار المفتاح التي يمكنك استخدامها. على سبيل المثال، يمكنك استخدام ثلاثة أنواع إطار المفتاح مع DoubleAnimationUsingKeyFrames: DiscreteDoubleKeyFrame ، LinearDoubleKeyFrame و SplineDoubleKeyFrame (يتم وصف أساليب الاستنتاج بالتفصيل في مقطع لاحق.)
الغرض الأساسي من إطار المفتاح هو تحديد KeyTime و Value. كل نوع إطار المفتاح يوفر هذه الخاصيتين.
خاصية Value تحدد قيمة الهدف لإطار المفتاح.
خاصية KeyTime تحدد متى (داخل Duration الخاص بالحركة) يمكن الوصول إلى Value الخاص بإطار المفتاح.
عندما تبدأ حركة إطار المفتاح، تتكرر عبر إطارات المفتاح الخاصة به بالترتيب المعرّف من قِبل خصائص KeyTime الخاصة بهم.
إذا لك يكن هناك إطار المفتاح عند الوقت 0, تقوم الحركة بإنشاء انتقال بين القيمة الحالية لخاصية الهدف و Value من إطار المفتاح الأول; وإلا، قيمة الناتج الخاصة بالحركة تصبح القيمة الأولى لإطار المفتاح.
تنشئ الحركة الانتقال بين Value من الإطارات المفتاح الأول و الثاني باستخدام أسلوب الاستنتاج المحدد بواسطة إطار المفتاح الثاني. يبدأ الانتقال من KeyTime الخاص بإطار المفتاح الأول و ينتهي عند الوصول إلى KeyTime الخاص بإطار المفتاح الثاني.
تستمر الحركة, تنشئ انتقالات بين كل إطار مفتاح لاحق و إطار المفتاح الذي يسبقه.
أخيراً، انتقالات الحركة إلى قيمة إطار المفتاح مع أكبر وقت مفتاح المساوي إلى أو أصغر من Duration الخاص بالحركة.
إذا كان Duration الخاص بالحركة هو Automatic أو Duration الخاص به يساوي وقت إطار المفتاح الأخير، تنتهي الحركة. وإلا, إذا Duration الخاص بالحركة أكبر من وقت مفتاح إطار المفتاح الأخير ، تحتفظ الحركة بقيمة إطار المفتاح حتى تصل إلى نهاية Duration الخاص بها. تستخدم حركة إطار المفتاح مثل كافة الحركات خاصية FillBehavior الخاصة بها لتحديد ما إذا كانت تحتفظ بالقيمة النهائية عندما تصل إلى نهاية فترة نشاطها. لمزيد من المعلومات، راجع نظرة عامة على سلوك التوقيت.
يستخدم المثال التالي كائن DoubleAnimationUsingKeyFrames المعرف في المثال السابق لشرح كيفية عمل خصائص Value و KeyTime.
يقوم إطار المفتاح الأول بتعيين قيمة ناتج الحركة مباشرة إلى 0.
الالمفتاح الثاني إطار تحريك من 0 إلى 350. يبدأ بعد انتهاء الإطار الأساسي أول (في وقت = 0 ثانية) واللعب لثانيتين، الإنهاء في وقت = 0: 0: 2.
المفتاح الثالث إطار تحريك من 350 إلى 50. ويبدأ عند انتهاء الإطار المفتاح الثاني (في وقت = 2 ثانية) واللعب لمدة 5 ثوان، الإنهاء في وقت = 0: 0: 7.
المفتاح الرابع إطار تحريك من 50 إلى 200. ويبدأ عند انتهاء الإطار المفتاح الثالث (في وقت = 7 ثوان) واللعب لثانية واحدة، الإنهاء في وقت = 0: 0: 8.
لأن خاصية Duration من الحركة تم تعيينها إلى 10 ثواني، الحركة تحمل القيمة النهائية الخاصة به لثانيتين قبل الانتهاء عند الوقت = 0:0:10.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
WindowTitle="KeyFrame Animations">
<Border Width="400" BorderBrush="Black">
<Rectangle Fill="Blue"
Width="50" Height="50"
HorizontalAlignment="Left">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from 0 to 350, then 50,
then 200 over 10 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Border>
</Page>
أساليب الاستنتاج
المقاطع السابقة ذكرت أن بعض حركات إطار المفتاح تدعم أساليب استنتاج متعددة. يوضح استنتاج الحركة كيف تتنقل الحركة بين القيم المختلفة على طول مدتها الزمنية. عن طريق تحديد نوع إطار المفاتيح الذي تستخدمه في الحركة ، يمكنك تعريف أسلوب الاستنتاج لقطعة إطار المفتاح تلك. هناك ثلاثة أنواع مختلفة من أساليب الاستنتاج: خطي, منفصل , و splined.
الاستنتاج الخطي
مع الاستنتاج الخطي، تتقدم الحركة بمعدل ثابت من مدة المقطع. على سبيل المثال، إذا قامت قطعة إطار المفتاح بالانتقال من 0 إلى 10 عبر مدة من 5 ثواني، الحركة ستقوم بإخراج القيم التالية عند أوقات محددة:
Time |
قيمة الناتج |
|---|---|
0 |
0 |
1 |
2 |
2 |
4 |
3 |
6 |
4 |
8 |
4.25 |
8.5 |
4.5 |
9 |
5 |
10 |
الاستنتاج المنفصل
مع الاستنتاج المنفصل، تنتقل دالة الحركة من قيمة واحدة إلى التالية دون استنتاج. إذا قامت قطعة إطار المفتاح بالانتقال من 0 إلى 10 عبر مدة من 5 ثواني، الحركة ستقوم بإخراج القيم التالية عند أوقات محددة:
Time |
قيمة الناتج |
|---|---|
0 |
0 |
1 |
0 |
2 |
0 |
3 |
0 |
4 |
0 |
4.25 |
0 |
4.5 |
0 |
5 |
10 |
لاحظ كيفية أن الحركة لا تغير قيمة الإخراج الخاصة بها حتى نهاية مدة المقطع.
الاستنتاج splined هو أكثر تعقيداً. يتم وصفه في المقطع التالي.
الاستنتاج splined
يمكن استخدام الاستنتاج splined لتحقيق تأثيرات توقيت أكثر واقعية. لأن غالباً ما تستخدم الحركات لتقليد التأثيرات التي تحدث في العالم الحقيقي، قد يحتاج المطورين إلى تحكم دقيق لتسريع و تباطؤ الكائنات و إغلاق معالجة قطع التوقيت. تمكنك إطارات مفتاح الشريحة من التحريك مع الاستنتاج splined. مع إطارات المفتاح الأخرى, يمكنك تحديد Value و KeyTime. مع إطار مفتاح الشريحة, يمكنك أيضاً تحديد KeySpline. يظهر المثال التالي إطار مفتاح شريحة مفرد ل DoubleAnimationUsingKeyFrames. لاحظ خاصية KeySpline; هذا ما يجعل إطار مفتاح الشريحة مختلف عن الأنواع الأخرى من إطارات المفتاح.
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
يتم تعريف منحنى Bezier المكعب بواسطة نقطة بدء, نقطة نهاية و نقطتين عنصر تحكم. خاصية KeySpline من إطار مفتاح الشريحة تعرف نقطتي التحكم من منحنى Bezier اللتي يمتدا من (0,0) إلى (1,1). نقطة التحكم الأولى تتحكم في عامل المنحنى من النصف الأول من منحنى Bezier و نقطة التحكم الثانية تتحكم في عامل منحنى من النصف الثاني من مقطع Bezier. يصف المنحنى الناتج معدل التغيير لإطار مفتاح الشريحة. كلما كان المنحنى أكثر انحداراً ، كلما كان تغيير إطار المفتاح للقيمة الخاصة به أسرع. كلما يصبح المنحنى أكثر تسطحاً ، كلما كان تغيير إطار المفتاح للقيم الخاصة به ببطء أكبر.
يمكنك استخدام KeySpline لمحاكاة المسارات الفعلية مثل المياه المتساقطة أو الكرات المرتدة أو تطبيق تأثيرات "بسهولة في" و "سهولة السحب" الأخرى إلى حركة الحركة. للحصول على تأثيرات تفاعل المستخدم مثل اختفاء الخلفية أو حاجز رد زر عنصر تحكم ، قد يمكنك تطبيق استنتاج splined لزيادة سرعة أو إبطاء سرعة التغيير لحركة بطريقة معينة.
يحدد المثال التالي KeySpline من 1,0 0,1 الذي ينشئ منحنى Bezier التالي.
الشريحة الرئيسية مع نقاط تحكم (0.0 ، 1.0) و (1.0 ، 0.0)
.png "منحنى بيزير")
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
يقوم إطار المفتاح بالتحريك بسرعة كبيرة عندما يبدأ, يبطأ و ثم يسرع مرة أخرى قبل أن ينتهي.
يحدد المثال التالي KeySpline من 0.75,1.0 0.5,0.25 الذي ينشئ منحنى Bezier التالي.
A key spline with control points (0.25, 0.5) and (0.75, 1.0)
.png "منحنى بيزير")
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
بسبب أن تغيير تقوس منحنى Bezier قليلاً جداً, هذا إطار للمفتاح يتحرك بمعدل ثابت تقريباً; فإنه إلى حدٍ ما يتباطأ باتجاه النهاية الخاصة به.
يستخدم المثال التالي DoubleAnimationUsingKeyFrames لتحريك موضع المستطيل. لأن DoubleAnimationUsingKeyFrames يستخدم كائنات SplineDoubleKeyFrame، الانتقال بين كل قيمة إطار المفتاح تستخدم استنتاج splined.
<!-- This rectangle is animated using a key frame animation
with splined interpolation. -->
<Rectangle
Width="50"
Height="50"
Fill="Purple">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="SplineAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from its base value (0) to 500, then 200,
then 350 over 15 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="SplineAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:15"
RepeatBehavior="Forever">
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
<SplineDoubleKeyFrame Value="200" KeyTime="0:0:10" KeySpline="0.0,0.0 1.0,0.0" />
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
الاستنتاج splined يكون من الصعب فهمه; تجربة العمل مع إعدادات مختلفة تساعد. نموذج حركة شريحة المفتاح تتيح لك تغيير قيم شريحة المفتاح و مشاهدة نتيجتها على الحركة.
ضم أساليب التشغيل التفاعلي
يمكنك استخدام إطارات المفتاح مع أنواع مختلفة من الاستنتاج في حركة إطار مفتاح واحد. عندما تتبع اثنين من حركات إطار المفتاح باستنتاجات مختلفة بعضها البعض, يتم استخدام أسلوب الاستنتاج لإطار المفتاح الثاني لإنشاء الانتقال من القيمة الأولى إلى الثانية.
في المثال التالي, يتم إنشاء DoubleAnimationUsingKeyFrames الذي يستخدم الاستنتاج الخطي, splined ، و المنفصل.
<!-- This rectangle is animated using a key frame animation
with a combination of interpolation methods. -->
<Rectangle
Width="50"
Height="50"
Fill="Orange">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="ComboAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from its base value (0) to 500, then 200,
then 350 over 15 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="ComboAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:15"
RepeatBehavior="Forever">
<DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"
KeySpline="0.25,0.5 0.75,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
المزيد حول المدة و أوقات المفتاح
مثل الحركات الأخرى, حركات إطار المفتاح يحتوي على Duration الخاصية. بالإضافة إلى تحديد Duration الخاص بالحركة، تحتاج إلى تحديد أي جزء من تلك المدة تُعطى إلى كل إطار مفتاح. يمكنك القيام بذلك عن طريق وصف KeyTime لكل إطارات المفتاح الخاصة بالحركة. كل KeyTime خاص بإطار المفتاح يحدد متى ينتهي إطار المفتاح.
خاصية KeyTime لا تحدد طول المدة التي يشتغلها وقت المفتاح. مقدار الوقت الذي يشتغله إطار المفتاح يتم تحديده عندما ينتهي إطار المفتاح, عندما ينتهي إطار المفتاح السابق و مدة الحركة. أوقات المفتاح يتم تعيينها كقيمة وقت, النسبة المئوية، أو كالقيم الخاصة Uniform أو Paced.
توضح القائمة التالية الطرق المختلفة لتحديد أوقات المفتاح.
قيم TimeSpan
يمكنك استخدام قيم TimeSpan لتحديد KeyTime. يجب أن تكون القيمة أكبر من أو تساوي 0 و أقل من أو تساوي مدة الحركة. يظهر المثال التالي حركة تكون مدتها 10 ثواني و أربعة إطارات المفتاح الذي يتم تحديد أوقات المفتاح الخاصة به كقيم أوقات.
يقوم إطار المفتاح الأول بالتحريك من القيمة الأساسية إلى 100 عبر أول ثلاث ثواني و تنتهي عند وقت = 0: 0: 3.
الالمفتاح الثاني إطار تحريك من 100 إلى 200. It starts after the first key frame ends (at time = 3 seconds) and plays for 5 seconds, ending at time = 0:0:8.
المفتاح الثالث إطار تحريك من 200 إلى 500. ويبدأ عند انتهاء الإطار المفتاح الثاني (في وقت = 8 ثوان) واللعب لثانية واحدة، الإنهاء في وقت = 0: 0: 9.
المفتاح الرابع إطار تحريك من 500 إلى 600. ويبدأ عند انتهاء الإطار المفتاح الثالث (في وقت = 9 ثواني) واللعب لثانية واحدة، الإنهاء في وقت = 0: 0: 10.
<!-- This rectangle is animated with KeyTimes using TimeSpan values.
Goes to 100 in the first 3 seconds, 100 to 200 in
the next 5 seconds, 300 to 500 in the next second,
and 500 to 600 in the final second. -->
<Rectangle Width="50" Height="50" Fill="Blue">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform01" X="10" Y="30" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform01"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed as TimeSpan values
which are in the form of "hours:minutes:seconds". -->
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:9" />
<LinearDoubleKeyFrame Value="600" KeyTime="0:0:10" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
قيم النسبة المئوية
قيمة النسبة مئوية تحدد أن ينتهي إطار المفتاح عند نسبة مئوية معينة من Duration الخاص بالحركة. في XAML, تقوم بتحديد النسبة كرقم متبوعاً برمز %. في التعليمات البرمجية، يمكنك استخدام أسلوب FromPercent و تمرير إليه Double التي تشير إلى النسبة المئوية. يجب أن تكون القيمة أكبر من أو تساوي 0 و أقل من أو تساوي 100 بالمائة. يظهر المثال التالي حركة تكون مدتها 10 ثواني و أربعة إطارات المفتاح الذي يتم تحديد أوقات المفتاح الخاصة به كنسب.
يقوم إطار المفتاح الأول بالتحريك من القيمة الأساسية إلى 100 عبر أول ثلاث ثواني و تنتهي عند وقت = 0: 0: 3.
الالمفتاح الثاني إطار تحريك من 100 إلى 200. يبدأ بعد انتهاء الإطار الأساسي أول (في وقت = 3 ثواني) واللعب لمدة 5 ثوان، الإنهاء في وقت = 0: 0: 8 (0.8 * 10 = 8).
المفتاح الثالث إطار تحريك من 200 إلى 500. ويبدأ عند انتهاء الإطار المفتاح الثاني (في وقت = 8 ثوان) و لثانية واحدة، وتنتهي في وقت تشغيل = 0: 0: 9 (0.9 * 10 = 9).
المفتاح الرابع إطار تحريك من 500 إلى 600. It starts when the third المفتاح إطار ends (at الوقت = 9 ثواني) و plays for 1 ثانية, الإنهاء at الوقت = 0:0:10 (1 * 10 = 10).
<!-- Identical animation behavior to the previous rectangle
but using percentage values for KeyTimes rather then TimeSpan. -->
<Rectangle Height="50" Width="50" Fill="Purple">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform02" X="10" Y="110" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform02"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed as Percentages. -->
<LinearDoubleKeyFrame Value="100" KeyTime="30%" />
<LinearDoubleKeyFrame Value="200" KeyTime="80%" />
<LinearDoubleKeyFrame Value="500" KeyTime="90%" />
<LinearDoubleKeyFrame Value="600" KeyTime="100%" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
قيمة خاصة، منتظم
استخدم توقيت Uniform عندما تريد لكل إطار المفتاح الحصول على نفس القدر من الوقت.
وقت مفتاح Uniform يقسم الوقت المتوفر بشكل متساو على عدد إطارات المفتاح لتحديد وقت انتهاء كل إطار مفتاح. يظهر المثال التالي حركة تكون مدتها 10 ثواني و أربعة إطارات المفتاح الذي يتم تحديد أوقات المفتاح الخاصة به ك Uniform.
يقوم إطار المفتاح الأول بالتحريك من القيمة الأساسية إلى 100 عبر أول ثلاث ثواني و تنتهي عند وقت = 0: 0: 2.5.
الالمفتاح الثاني إطار تحريك من 100 إلى 200. It starts بعد the أول المفتاح إطار ends (at الوقت = 2.5 ثواني) و plays for approximately 2.5 ثواني, الإنهاء at الوقت = 0:0:5.
المفتاح الثالث إطار تحريك من 200 إلى 500. It starts when the second key frame ends (at time = 5 seconds) and plays for 2.5 seconds, ending at time = 0:0:7.5.
المفتاح الرابع إطار تحريك من 500 إلى 600. ويبدأ عند انتهاء الإطار المفتاح الثاني (في وقت = 7.5 ثانية) واللعب لمدة 2.5 ثوان، الإنهاء في وقت = 0: 0: 1.
<!-- This rectangle is animated with KeyTimes using Uniform values. -->
<Rectangle Height="50" Width="50" Fill="Red">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform03" X="10" Y="190" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform03"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed with values of Uniform.
When a key time is set to "Uniform" the total allotted
time of the animation is divided evenly between key frames.
In this example, the total duration of the animation is
ten seconds and there are four key frames each of which
are set to "Uniform", therefore, the duration of each key frame
is 3.3 seconds (10/3). -->
<LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="200" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="600" KeyTime="Uniform" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
قيمة خاصة، تم التقدم عليه
استخدم توقيت Paced عندما تريد التحريك بمعدل ثابت.
وقت مفتاح Paced يخصص الوقت المتوفر بالنسبة إلى طول كل إطار مفتاح لتحديد مدة كل إطار. هذا سيوفر السلوك أن السرعة أو نسبة التقدم من الحركة تبقى ثابتة. يظهر المثال التالي حركة تكون مدتها 10 ثواني و ثلاث إطارات المفتاح الذي يتم تحديد أوقات المفتاح الخاصة به ك Paced.
<!-- Using Paced Values. Rectangle moves between key frames at
uniform rate except for first key frame
because using a Paced value on the first KeyFrame in a
collection of frames gives a time of zero. -->
<Rectangle Height="50" Width="50" Fill="Orange">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform04" X="10" Y="270" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform04"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed with values of Paced.
Paced values are used when a constant rate is desired.
The time allocated to a key frame with a KeyTime of "Paced"
is determined by the time allocated to the other key
frames of the animation. This time is calculated to
attempt to give a "paced" or "constant velocity"
for the animation. -->
<LinearDoubleKeyFrame Value="100" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="200" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="600" KeyTime="Paced" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
لاحظ أن ، إذا كان وقت المفتاح لإطار المفتاح الأخير هو Paced أو Uniform، سيتم تعيين وقت مفتاح المحلول إلى 100 بالمائة. If the أول المفتاح إطار في a multiframe رسم متحرك هو paced, its حل المفتاح الوقت will be التعيين إلى 0. (If the المفتاح إطار مجموعة يحتوي على فقط a مفرد المفتاح إطار و it هو a paced المفتاح إطار, its حل المفتاح الوقت will be التعيين إلى 100 نسبة مئوية.)
إطارات المفتاح المختلفة داخل حركة إطار مفتاح واحد قد يستخدم أنواع وقت المفتاح المختلفة.
دمج أوقات المفتاح, إطارات المفتاح Out-Of-Order
يمكنك استخدام إطارات المفتاح مع أنواع قيم KeyTime مختلفة في نفس الحركة. و على الرغم من أنه من المستحسن أن تقوم بإضافة إطارات المفتاح بالترتيب الذي يجب أن يتم تشغيلهم به إلا أنه غير ضروري. نظام الحركة و التوقيت قادرين على حل خارج ترتيب إطارات المفتاح. الإطارات المفتاح مع أوقات مفتاح غير صالحة يتم تجاهلها.
توضح القائمة التالية الإجراء الذي به يتم حل أوقات المفتاح لإطارات المفتاح الخاصة بحركة إطار المفتاح.
حدد الوقت الإجمالي للاستنتاج للحركة ، الوقت الإجمالي الذي تستغرقه حركة إطار المفتاح لإكمال تكرار إلى الأمام.
استخدام قيمة الوقت الإجمالي للاستنتاج لحل قيم Percent KeyTime.
حل آخر إطار مفتاح إذا لم يتم حله بالفعل في الخطوات السابقة. إذا كان KeyTime من آخر إطار مفتاح هو Uniform أو Paced ، سيكون وقت الحل مساوي للوقت الإجمالي للاستنتاج.
إذا KeyTime من إطار المفتاح الأول هو Paced و هذه الحركة تحتوي على أكثر من إطارات المفتاح, قم بحل قيمة KeyTime الخاصة به إلى صفر; إذا كان هناك إطار مفتاح واحد فقط و قيمة KeyTime الخاصة به هي Paced و يتم تحليلها إلى الوقت الإجمالي للاستنتاج كما هو موضح في الخطوة السابقة.
حل قيم Uniform KeyTime المتبقية: كل منهم مُعطاه مشاركة متساوية من الوقت المتوفر. أثناء هذه العملية قيم Paced KeyTime الغير محلولة تعامل مؤقتاً كقيم Uniform KeyTime، و الحصول على وقت حل مؤقت.
حل قيم KeyTime من إطارات المفتاح مع أوقات مفتاح غير محددة باستخدام إطارات المفتاح المعرفة أقرب إليه التي حلت قيم KeyTime.
حل قيم Paced KeyTime المتبقية: Paced KeyTime يستخدم قيم KeyTimeلإطارات المفتاح المجاورة لتحديد وقت الحل الخاص بهم. الهدف هو التأكد أن سرعة الحركة ثابتة حول وقت حل هذا الإطار للمفتاح.
فرز إطارات المفتاح بالترتيب حسب وقت الحل (المفتاح الأساسي)، و حسب التعريف (المفتاح الثانوي)، على سبيل المثال، استخدم فرز مستقر استناداً إلى قيم إطار المفتاح KeyTime القيم.