تحميل XamlFlair - تحميل رمز المصدر XamlFlair

Xamlflair

الهدف من مكتبة Xamlflair هو تخفيف تنفيذ الرسوم المتحركة الشائعة والسماح للمطور بإضافة مجموعة واحدة من الرسوم المتحركة بسهولة أو مجتمعة مع بضعة أسطر من XAML.

نموذج التطبيق

عرض

لعبة الألغاز Sekuence

يدعمني

إذا كنت ترغب في دعم عملي مع عدد قليل من القهوة ، فيمكنك القيام بذلك هنا: اشتر لي القهوة. تسمح لي مساعدتك بمواصلة قضاء بعض الوقت في هذا المشروع ومواصلة الحفاظ عليه وتحديثه بميزات جديدة عند الإمكان. شكرا مقدما!

محتويات

تثبيت من nuget
ميزات نظرة عامة
المفاهيم الأساسية
الاستخدام
أنواع الرسوم المتحركة الأساسية
الرسوم المتحركة الملونة ( WPF و UNO فقط )
تجاوز القيم الافتراضية العالمية
استخدام ResourceDictionary لإعدادات الأساس
الرسوم المتحركة الافتراضية ( WPF فقط )
خاصية TransformOn ( WPF فقط )
دورات المنظور ( UWP فقط )
الجمع بين الرسوم المتحركة
القيم الغالبة
الترجمات النسبية على محاور x و y
الرسوم المتحركة المركبة
تكرار الرسوم المتحركة
الأحداث
روابط
أوامر الانتهاء الأولية والثانوية
باستخدام خاصية StartWith
باستخدام خاصية AllowOpacityReset ( WPF فقط )
باستخدام خاصية ClipToBounds ( UWP و UNO فقط )
تصحيح الرسوم المتحركة
تسجيل الرسوم المتحركة
ListViewBase ( UWP و UNO ) والرسوم المتحركة القائمة ListBox ( WPF )

تثبيت من nuget

منصة	طَرد	nuget
UWP	xamlflair.uwp
WPF	xamlflair.wpf
Uno	xamlflair.uno

لتثبيت xamlflair ، قم بتشغيل الأمر التالي في وحدة التحكم في Manager :

UWP:

 Install-Package XamlFlair.UWP

يجب أن يستهدف تطبيقك ما لا يقل عن Windows 10 الإصدار 1809 (بناء 17763)

WPF:

 Install-Package XamlFlair.WPF

UNO:

 Install-Package XamlFlair.Uno

يجب أن يستهدف تطبيق UWP الخاص بك كحد أدنى من إصدار Windows 10 1809 (Build 18362)

ميزات نظرة عامة

ميزة	UWP	WPF	UWP (UNO)	iOS (UNO)	Android (UNO)	WASM (UNO) التجريبية
نظام الرسوم المتحركة	تعبير	قصص	قصص	قصص	قصص	قصص
نوع التحويل	ن/أ	TransformGroup	compositeTransform	compositeTransform	compositeTransform	compositeTransform
defaultanimations.xaml	-	✔	-	-	-	-
`TransformOn`	-	✔	-	-	-	-
الرسوم المتحركة المركبة	✔	✔	✔	✔	✔	✔
الترجمات النسبية	✔	✔	✔	✔	✔	✔
تكرار الرسوم المتحركة	✔	✔	✔	✔	✔	✔
الأحداث والروابط	✔	✔	✔	✔	✔	✔
أوامر الانتهاء الأولية/الثانوية	✔	✔	✔	✔	✔	✔
`StartWith`	✔	✔	✔	✔	✔	✔
`AllowOpacityReset`	-	✔	-	-	-	-
`ClipToBounds`	✔	ن/أ	✔	✔	✔	✔
قوائم الرسوم المتحركة	✔	✔	✔	✔	✔	✔
تأثير طمس	✔	✔	-	-	-	-
تأثير التشبع	✔	-	-	-	-	-
تأثير الصبغة	✔	-	-	-	-	-
الرسوم المتحركة الملونة	-	✔	✔	✔	✔	✔
دورات المنظور (دوار)	✔	-	-	-	-	-
تصحيح الرسوم المتحركة	✔	✔	✔	✔	✔	-

المفاهيم الأساسية

يعتمد المفهوم الأساسي لـ xamlflair على الرسوم المتحركة التي يتم تصنيفها على أنها من وإلى . سيبدأ أي عنصر واجهة مستخدم يتكون من الرسوم المتحركة بقيم تعسفية واحدة أو أكثر ، ويكمل باستخدام القيمة الافتراضية للخاصية المقابلة . سيبدأ أي عنصر واجهة المستخدم يتكون من الرسوم المتحركة في حالته الحالية ويحرك إلى قيم واحدة أو أكثر من القيم التعسفية .

مثال على الرسوم المتحركة (عنصر واجهة المستخدم يترجم إلى القيمة الافتراضية للترجمة (0)):

من الرسوم المتحركة

مثال على الرسوم المتحركة (عنصر واجهة المستخدم ينزلق بعيدًا عن حالته الحالية):

للرسوم المتحركة

ملاحظة : من المهم ملاحظة أن هناك استثناءً لهذه القاعدة للرسوم المتحركة الملونة ، والتي يتم شرحها في قسم أنواع الرسوم المتحركة الأساسية.

الاستخدام

للبدء ، تحتاج إلى الحصول على مرجع مساحة اسم XAML التالية:

UWP و UNO:

xmlns:xf="using:XamlFlair"

WPF:

xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF"

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

< Border xf:Animations.Primary= " {StaticResource FadeIn} " />

ملاحظة : إذا قام FrameworkElement بتحديد CompositeTransform في XAML الخاص بك ، فسيتم تغييره أثناء عملية الرسوم المتحركة.

ملاحظة : إن استخدام StaticResource هو الإشارة إلى الرسوم المتحركة الشائعة العالمية ، والتي تمت مناقشتها في القسم التالي.

أنواع الرسوم المتحركة الأساسية

يختفي

تتلاشى الرسوم المتحركة

تحذير : كن حذرًا عند تحريك FadeTo لأن العنصر يبقى في الشجرة المرئية إذا كانت Visibility Visible . قد تكون هناك حالات ستحتاج فيها إلى إدارة IsHitTestVisible يدويًا للسماح للمستخدم بالاستفادة من العنصر.

يترجم

ترجمة الرسوم المتحركة

حجم

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

تناوب

الرسوم المتحركة الدوران

طمس ( UWP و WPF فقط )

الرسوم المتحركة طمس

تشبع ( UWP فقط )

تشبع الرسوم المتحركة

Tint ( UWP فقط )

صبغة الرسوم المتحركة

اللون ( WPF و UNO فقط )

الرسوم المتحركة الملونة

ملاحظة : من المهم أن نلاحظ عند تحريك اللون باستخدام A From Animation ، وسيتم تحريك اللون من قيمة محددة إلى حالته الحالية بدلاً من القيمة الافتراضية.

دوار ( UWP فقط )

دوارة الرسوم المتحركة

ملاحظة : اقرأ دورات منظور القسم ( UWP فقط ) لمزيد من التفاصيل.

يسرد ما يلي بعض القيم الافتراضية البارزة عند العمل مع xamlflair:

النوع : fadeto
المدة ( ميلي ثانية ): 500
التخفيف : مكعب
وضع التخفيف : Easeout
TransformCenterpoint : (0.5 ، 0.5)
الحدث : محمّل
InterlementDelay ( Milliseconds ): 25 ( ضوابط قائمة فقط )
Transforon : عرض ( WPF فقط )
التشبع : 0.5 ( UWP فقط )
لون : شفاف ( UWP فقط )

الرسوم المتحركة الملونة ( WPF و UNO فقط )

تتطلب الرسوم المتحركة الملونة بعض الاهتمام لأنها تختلف قليلاً عن الرسوم المتحركة الأخرى الأساسية. عند استخدام إما ColorTo و ColorFrom ، يجب القيام بما يلي:

يمكنك فقط تحريك الخصائص التالية: Control.Background ، Control.Foreground ، Control.BorderBrush ، Border.Background ، Border.BorderBrush ، TextBlock.Foreground ، Shape.Fill ، Shape.Stroke
تأكد من تعيين فرشاة على الخاصية المقابلة التي تنوي تحريكها
يجب عليك أيضًا تحديد الخاصية الهدف باستخدام ColorOn

المثال التالي سيحفز Fill المستطيل من RoyalBlue إلى Darkgreen:

< xf : AnimationSettings x : Key = " SampleColorAnimation "
                      Kind = " ColorTo "
                      Color = " DarkGreen "
                      ColorOn = " Fill " />

< Rectangle Fill = " RoyalBlue "
           xf:Animations.Primary= " {StaticResource SampleColorAnimation} " />

تجاوز القيم الافتراضية العالمية

إذا كانت هناك حاجة إلى تغيير أحد قيم الرسوم المتحركة الافتراضية على مستوى العالم (على سبيل المثال ، بعد Duration افتراضية قدرها 750 بدلاً من 500) ، يمكنك الاتصال بوظيفة OverrideDefaultSettings في رمز تهيئة التطبيق الخاص بك. يغير المثال التالي القيم الافتراضية Duration Easing :

 XamlFlair . Animations . OverrideDefaultSettings (
    duration : 750 ,
    easing : EasingType . Quadratic ) ;

لذلك ، مع رمز العينة أعلاه ، سيتم تشغيل كل الرسوم المتحركة لمدة 750 مللي ثانية مع تخفيف تربيعي.

استخدام `ResourceDictionary` لإعدادات الأساس

يجب وضع جميع الرسوم المتحركة الشائعة في ResourceDictionary عالمية (على سبيل المثال: Animations.xaml ) واستخدامها عند الحاجة في جميع أنحاء التطبيق. الهدف من ذلك هو توحيد جميع الرسوم المتحركة في ملف واحد بأسماء ذات معنى حتى يتمكن أي مطور من فهم بالضبط ما يتم تطبيق الرسوم المتحركة على FrameworkElement . إليك مثال صغير على ما يبدو عليه:

< ResourceDictionary xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
                    xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
                    xmlns : xf = " using:XamlFlair " >

    < x : Double x : Key = " PositiveOffset " >50</ x : Double >
    < x : Double x : Key = " NegativeOffset " >-50</ x : Double >
    < x : Double x : Key = " SmallScaleFactor " >0.75</ x : Double >
    < x : Double x : Key = " LargeScaleFactor " >1.25</ x : Double >

    < xf : AnimationSettings x : Key = " FadeIn "
                          Kind = " FadeFrom "
                          Opacity = " 0 " />

    < xf : AnimationSettings x : Key = " FadeOut "
                          Kind = " FadeTo "
                          Opacity = " 0 " />

    <!-- Scale to a larger value -->
    < xf : AnimationSettings x : Key = " Expand "
                          Kind = " ScaleXTo,ScaleYTo "
                          ScaleX = " {StaticResource LargeScaleFactor} "
                          ScaleY = " {StaticResource LargeScaleFactor} " />

    <!-- Scale from a larger value -->
    < xf : AnimationSettings x : Key = " Contract "
                          Kind = " ScaleXFrom,ScaleYFrom "
                          ScaleX = " {StaticResource LargeScaleFactor} "
                          ScaleY = " {StaticResource LargeScaleFactor} " />
    .
    .
    .
    </ ResourceDictionary >

لإعداد هذه المجموعة من AnimationSettings التي تم تكوينها مسبقًا متوفرة بالفعل في تطبيقك ، قم بتنفيذ الخطوات التالية:

انقر بزر الماوس الأيمن في مشروعك ، ثم انقر فوق إضافة> عنصر جديد ...
اختر قاموس الموارد وتسمية Animations.xaml
في App.xaml الخاص بك ، أضف ما يلي:

    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < ResourceDictionary Source = " Animations.xaml " />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

في Animations.xaml ، نسخ ولصق المحتويات من الروابط المقابلة أدناه:

إعدادات الرسوم المتحركة لـ UWP
إعدادات الرسوم المتحركة لـ WPF
إعدادات الرسوم المتحركة لـ UNO

يحتوي تطبيقك الآن على مجموعة عالمية من الرسوم المتحركة الشائعة جاهزة للاستخدام.

الرسوم المتحركة الافتراضية ( WPF فقط )

بدلاً من ذلك لإنشاء ResourceDictionary الخاصة التي تحتوي على AnimationSettings المخصصة ، يوفر Xamlflair بعض الرسوم المتحركة الافتراضية .

للإشارة إلى هذه الرسوم المتحركة الافتراضية في تطبيقك ، قم بإجراء الخطوات التالية في App.xaml :

حدد مساحة الاسم XamlFlair.WPF في الأعلى:

    xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF"

تحديث موارد التطبيق الخاصة بك:

    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < xf : XamlFlairResources />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

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

إذا كان Visual Studio Intellisense لا يعمل عند استخدام <xf:XamlFlairResources /> ، فقد ترغب في تجربة ما يلي بدلاً من ذلك:

    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < ResourceDictionary Source = " pack://application:,,,/XamlFlair.WPF;component/DefaultAnimations.xaml " />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

خاصية `TransformOn` ( WPF فقط )

باستخدام خاصية TransformOn ، يمكنك استهداف نوع RenderTransform لتطبيقه على الرسوم المتحركة الخاصة بك. الخيارات المتاحة هي Render Layout . عندما لا يتم تحديد شيء ، يتم Render Vale الافتراضي. إليك مثال على الاثنين:

تحويل الرسوم المتحركة

ملاحظة : من المهم جدًا ملاحظة أن LayoutTransform من WPF لا يدعم أي TranslateTransform ، وبالتالي فإن ترجمة الرسوم المتحركة لن تعمل أبدًا. يمكنك قراءة المزيد حول هذا الموضوع في قسم الملاحظات هنا.

دورات المنظور ( UWP فقط )

من المهم أن نلاحظ أنه لتطبيق دوران المنظور (يشار إليه أيضًا باسم Swivel ) بعنصر مستهدف ، يجب أن يتم لفه في حاوية مع خصائص التخطيط المطبقة على عنصر الحاوية. لذلك ، ضع في اعتبارك دوران المنظور البسيط التالي:

< xf : AnimationSettings x : Key = " PerspectiveVerticalRotation "
                      Kind = " SwivelYFrom "
                      SwivelY = " -45 " />

بدلاً من تحريك العنصر على هذا النحو:

< Rectangle Fill = " RoyalBlue "
           Width = " 200 "
           Height = " 200 "
           HorizontalAlignment = " Center "
           VerticalAlignment = " Center "
           xf:Animations.Primary= " {StaticResource PerspectiveVerticalRotation} " />

يجب وضع العنصر في حاوية حتى تعمل الرسوم المتحركة بشكل صحيح:

< Border Width = " 200 "
        Height = " 200 "
        HorizontalAlignment = " Center "
        VerticalAlignment = " Center " >
    < Rectangle Fill = " RoyalBlue "
           xf:Animations.Primary= " {StaticResource PerspectiveVerticalRotation} " />
</ Border >

الجمع بين الرسوم المتحركة

يمكن الجمع بين الرسوم المتحركة ، وكما ذكرنا سابقًا ، يجب وضع أي من هذه الرسوم المتحركة مجتمعة التي يتم استخدامها بشكل شائع في ResourceDictionary العالمية (على سبيل المثال: Animations.xaml ):

< ResourceDictionary xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
                    xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
                    xmlns : xf = " using:XamlFlair " >
    .
    .
    .
    < xf : AnimationSettings x : Key = " FadeInAndSlideFromLeft "
                          Kind = " FadeFrom,TranslateXFrom "
                          Opacity = " 0 "
                          OffsetX = " {StaticResource NegativeOffset} " />

    < xf : AnimationSettings x : Key = " FadeInAndSlideFromTop "
                          Kind = " FadeFrom,TranslateYFrom "
                          Opacity = " 0 "
                          OffsetY = " {StaticResource NegativeOffset} " />

    < xf : AnimationSettings x : Key = " FadeInAndGrow "
                          Kind = " FadeFrom,ScaleXFrom,ScaleXFrom "
                          Opacity = " 0 "
                          ScaleX = " {StaticResource SmallScaleFactor} "
                          ScaleY = " {StaticResource SmallScaleFactor} " />

    < xf : AnimationSettings x : Key = " FadeInAndGrowHorizontally "
                          Kind = " FadeFrom,ScaleXFrom "
                          Opacity = " 0 "
                          ScaleX = " {StaticResource SmallScaleFactor} " />
    .
    .
    .
    </ ResourceDictionary >

هذا يوضح الرسوم المتحركة المشتركة من FadeFrom TranslateFrom :

تتلاشى والترجمة الرسوم المتحركة

هذا يوضح الرسوم المتحركة المدمجة من FadeFrom و TranslateFrom و ScaleFrom :

تتلاشى ، ترجمة ، وحجم تسريح

القيم الغالبة

يمكن أن تجعل الرسوم المتحركة إعداداتها مباشرة على FrameworkElement . يتم ذلك بشكل شائع لتغيير القيم للتأخير والمدة حتى لا نتفوق على ملف Animations.xaml بموارد متكررة. لتحقيق الإفراط ، استخدم امتداد الترميز Animate مقترنًا بخاصية BasedOn :

< Border xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource ScaleFromBottom}, Delay=500} " />

الترجمات النسبية على محاور x و y

نظرًا لأن القيم المرمزة من أجل OffsetX و OffsetY يمكن أن تكون محدودة (كما هو الحال في الحالات عند التعامل مع Windows يمكن إصلاحها) ، تدعم كل من OffsetX و OffsetY القيم المستندة إلى النجوم:

< Border xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource SlideFromLeft}, OffsetX=1.5*} " />

ستحسب القيمة المستندة إلى النجوم الإزاحة استنادًا إلى القيمة ( ActualWidth و /أو القيمة ActualHeight ) FrameworkElement ، وبالتالي من المهم أن يقوم العنصر بتنفيذ حدثه Loaded . إذا لم يتم احتساب ActualWidth و/أو ActualHeight بعد ، فسيحاول قيمة الإزاحة أن تستند إلى Width و/أو Height .

الرسوم المتحركة المركبة

الرسوم المتحركة المركبة هي ببساطة رسوم متحركة متعددة الخطوات باستخدام فئة CompoundSettings . تنفذ كل الرسوم المتحركة الداخلية بمجرد اكتمال العنوان السابق ، وبالتالي فهي رسوم متحركة متسلسلة:

الرسوم المتحركة المركبة

< xf : CompoundSettings x : Key = " Compound " >
    < xf : CompoundSettings .Sequence>
        < xf : AnimationSettings Kind = " ScaleXTo "
                              ScaleX = " 1.25 "
                              Duration = " 1250 " />
        < xf : AnimationSettings Kind = " ScaleXTo "
                              ScaleX = " 1 "
                              Duration = " 1250 " />
        < xf : AnimationSettings Kind = " RotateTo "
                              Rotation = " 360 "
                              Duration = " 1250 " />
    </ xf : CompoundSettings .Sequence>
</ xf : CompoundSettings >

ملاحظة : تدعم CompoundSettings خاصية Event ، والتي تمت مناقشتها في قسم لاحق.

تكرار الرسوم المتحركة

يمكن تكرار الرسوم المتحركة باستخدام خصائص IterationBehavior IterationCount (القيم الافتراضية Count و 1 على التوالي).

الرسوم المتحركة المركبة

ما يلي يوضح كيفية تشغيل الرسوم المتحركة فقط 5 مرات:

< Border xf:Animations.Primary= " {StaticResource FadeIn} "
        xf:Animations.IterationCount= " 5 " />

ما يلي يوضح كيفية تشغيل الرسوم المتحركة إلى أجل غير مسمى:

< Border xf:Animations.Primary= " {StaticResource FadeIn} "
        xf:Animations.IterationBehavior= " Forever " />

لاحظ أيضًا أنه من الممكن أيضًا تكرار الرسوم المتحركة المركبة. على سبيل المثال ، باستخدام الرسوم المتحركة المركبة ( التقدم المسماة) من القسم السابق:

< Border xf:Animations.Primary= " {StaticResource Progress} "
        xf:Animations.IterationCount= " 5 " />

تحذير : عند استخدام الرسوم المتحركة المتكررة ، لا يمكنك تعيين رسوم متحركة Secondary على العنصر.

من المهم أن نلاحظ أن جميع الرسوم المتحركة لـ Xamlflair هي رسوم متحركة "انطلاق" ، وبعبارة أخرى ، تبدأ وتتوقف فقط عند اكتمالها (أو عندما يتم تفريغ العنصر المرتبط) ، باستثناء تكرار الرسوم المتحركة. يمكن إيقاف الرسوم المتحركة المتكررة عند توفير قيمة false للخاصية PrimaryBinding (يتم تغطية الروابط في القسم التالي):

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} " />

عندما يتم تعيين false على الربط ، سيتم تشغيل التكرار الحالي للرسوم المتحركة حتى ينتهي ثم تتوقف الرسوم المتحركة المتكررة.

الأحداث

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

< Button xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=Click} " />

بعض الأمثلة على الأحداث الشائعة التي يمكن استخدامها:

محملة ( القيمة الافتراضية )
الرؤية ( المشغلات فقط عند الرؤية == مرئية )
datacontextChanged ( المشغلات عندما لا تكون القيمة لاغية )
مؤشر
pointerexit
gotfocus
Lostfocus

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

قضية خاصة أخرى هي Visibility . على الرغم من عدم وجود حدث VisibilityChanged على FrameworkElement ، إلا أن خاصية Visibility قد عولجت كحدث تتغير فيها القيمة لأنه يمكن أن يكون مفيدًا لتحريك عنصر عندما يصبح مرئيًا على واجهة المستخدم. إذا تم تشغيل الرسوم المتحركة مع Event=Visibility ، فسيتم تشغيلها فقط كلما تم تعيين قيمة من Visibile .

روابط

واحدة من أهم القيم Event هي None ، وهي قيمة تستخدم لإلغاء أي مشغل الرسوم المتحركة القائمة على الأحداث. عند تحديد None ، ستحتاج إلى تشغيل الرسوم المتحركة الخاصة بك يدويًا باستخدام خصائص PrimaryBinding أو SecondaryBinding . هذه الخصائص هي من نوع bool وتتوقع قيمة True من أجل تنفيذ الرسوم المتحركة المقابلة. فيما يلي مثال على تشغيل الرسوم المتحركة على أساس IsChecked التحكم في مربع الاختيار:

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} " />

لن يتم تنفيذ الرسوم المتحركة أعلاه إلا عندما يكون IsChecked True . إذا لم يتم تحديد None Event ، فسيتم تنفيذ الرسوم المتحركة على Loaded وعلى الربط.

عند العمل مع كل PrimaryBinding والربط SecondaryBinding معًا (استنادًا إلى نفس القيمة المنطقية) ، قد يكون من الأنظف وأبسط CombinedBinding . CombinedBinding ببساطة يعمل كحذر من PrimaryBinding والتجميع SecondaryBinding معا. بدلا من ما يلي:

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} "
           xf:Animations.SecondaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox, Converter={StaticResource InverseBoolConverter}} "
           xf:Animations.Secondary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=None} "
           xf:Animations.StartWith= " {StaticResource FadeOut} " />

سوف تستخدمه على هذا النحو:

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.CombinedBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} "
           xf:Animations.Secondary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=None} "
           xf:Animations.StartWith= " {StaticResource FadeOut} " />

باستخدام CombinedBinding بهذه الطريقة ، فإنه يحفظ على الاضطرار إلى استخدام محول لقيمة منطقية عكسية ، والتي يتم التعامل معها داخليًا.

أوامر الانتهاء الأولية والثانوية

قد يكون هناك سيناريوهات حيث قد ترغب في تنفيذ ICommand عند اكتمال الرسوم المتحركة. في مثل هذه الحالة ، توجد خصائصان: PrimaryCompletionCommand و SecondaryCompletionCommand .

في المثال التالي ، سيتم تنفيذ الأمر المسمى MyCustomCommand بمجرد اكتمال الرسوم المتحركة الأساسية:

< TextBlock Text = " Example of a completion command "
           xf:Animations.Primary= " {StaticResource FadeInAndSlideFromBottom} "
           xf:Animations.PrimaryCompletionCommand= " {x:Bind MyCustomCommand} " />

باستخدام خاصية `StartWith`

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

< Rectangle xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource ScaleFromBottom}, Delay=500} "
           xf:Animations.StartWith= " {StaticResource ScaleFromBottom} " />

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

باستخدام خاصية `AllowOpacityReset` ( WPF فقط )

تنص وثائق .NET على ما يلي:

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

قد تكون هناك حالات عندما تنشط العتامة ، حيث تعيد الرسوم المتحركة العتبية بشكل مفاجئ أن تعيد ضبط القيمة بدلاً من الرسوم ، أو لا تتصرف كما تنوي. في الحالات ، قد تحتاج إلى تعيين AllowOpacityReset = False ( القيمة الافتراضية لـ AllowOpacityReset True ) لتحقيق السلوك المقصود:

< Image xf:Animations.Primary= " {StaticResource FadeInThenFadeOut} "
       xf:Animations.AllowOpacityReset= " False "
       Source = " /Assets/... " />

باستخدام خاصية `ClipToBounds` ( UWP و UNO فقط )

خاصية مفيدة موجودة في WPF ، ClipToBounds هي خاصية مفيدة موجودة في WPF ، ولكن للأسف ليس في UWP. لذلك ، تمت إضافته في Xamlflair بسبب سهولة الاستخدام والهدوء. لتقسيم محتوى الطفل إلى حدود العنصر المحتوي ، ما عليك سوى تعيين ClipToBounds على True على عنصر الاحتواء:

< Border xf:Layout.ClipToBounds= " True " >
.
.
.
< Border >

تصحيح الرسوم المتحركة

من أجل تصحيح الرسوم المتحركة والخطو إلى الكود ، استخدم خاصية EnableDebugging . تصحيح الأخطاء ممكن بسبب إدراج مكتبة Sourcelink. يرجى التأكد من القيام بما يلي:

Sourcelink1 Sourcelink2

< Rectangle xf:Animations.EnableDebugging= " InitializeElement "
           xf:Animations.Primary= " {StaticResource SlideFromLeft} " />

تشرح الجداول التالية قيم التعداد:

قيمة التعداد	وصف
`None`	القيمة الافتراضية. لن يحدث تصحيح الأخطاء.
`InitializeElement`	يكسر تصحيح الأخطاء في وظيفة `InitializeElement` لـ Xamlflair.
`RunAnimation`	يكسر تصحيح الأخطاء في وظيفة `RunAnimation` لـ Xamlflair.

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

تقوم مكتبة Xamlflair بإجراء تسجيل الدخول باستخدام Microsoft.Extensions.Logging.Abstractions . فيما يلي مثال على تسجيل الدخول باستخدام Serilog في تطبيق UWP:

 public App ( )
{
    this . InitializeComponent ( ) ;
    .
    .
    .
    // Setup the Serilog logger
    Log . Logger = new LoggerConfiguration ( )
        . MinimumLevel . Debug ( )
        . WriteTo . Debug ( )
        . CreateLogger ( ) ;

    // Initalie the XamlFlair loggers using the LoggerFactory (with Serilog support)
	XamlFlair . Animations . InitializeLoggers ( new LoggerFactory ( ) . AddSerilog ( ) ) ;
}

لإخراج قيم واحد أو أكثر من الرسوم المتحركة ، ما عليك سوى تعيين Debug على خاصية EnableLogging على FrameworkElement الهدف:

< Rectangle xf:Animations.EnableLogging= " Debug "
           xf:Animations.Primary= " {StaticResource SlideFromLeft} " />

سيوفر لك القيام بذلك إخراج وحدة التحكم المماثلة التالية (يختلف قليلاً عن WPF):

 Element = Windows.UI.Xaml.Controls.Button
Kind = FadeFrom, TranslateFrom
TargetProperty = Translation
Duration = 500
Delay = 0
Opacity = 0
OffsetX = 0
OffsetY = 50
OffsetZ = 0
ScaleX = 1
ScaleY = 1
ScaleZ = 1
Rotation = 0
Blur = 0
TransformCenterPoint = 0.5,0.5
Easing = Cubic
EasingMode = EaseOut

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

 Animations . EnableActiveTimelinesLogging = LogLevel . Debug ;

سيوفر لك القيام بذلك إخراج وحدة التحكم المماثلة التالية:

 ---------- ALL ACTIVE TIMELINES --------
Active timeline removed at 12:42:26:43222

Element = Button,  Key = d69f826a-1978-4a4e-b516-4a6b0469238b,  ElementGuid = 195d8c13-1dd7-4fef-a7f3-fc78bdab1cd7
    State = Running,  IsSequence = False,  IsIterating = False,  IterationBehavior = Count,  IterationCount = 0
------------------------------------

---------- ACTIVE TIMELINE --------
Guid d69f826a-1978-4a4e-b516-4a6b0469238b - Updated state to: Completed at 12:42:26:88616
------------------------------------

---------- ALL ACTIVE TIMELINES --------
Active timeline removed at 12:42:26:89614

NO ACTIVE TIMELINES!
------------------------------------

حاليا ، يتم تسجيل كل تسجيل الدخول في xamlflair المذكورة أعلاه على LogLevel.Debug

`ListViewBase` ( UWP و UNO ) والرسوم المتحركة القائمة `ListBox` ( WPF )

ListView العناصر الرسوم المتحركة

من أجل تنفيذ الرسوم المتحركة العناصر بشكل صحيح على عناصر القائمة ، لم يكن الأمر كافياً لإنشاء خصائص مرفقة مقابل عناصر التحكم في ListViewBase (UWP) وعناصر القائمة (WPF). بدلاً من ذلك ، تم إنشاء عناصر التحكم الموروثة: AnimatedListView و AnimatedGridView لـ UWP ، و AnimatedListView و AnimatedListBox لـ WPF ، وكلها متوفرة من مساحة اسم XamlFlair.Controls :

مساحة الاسم UWP و UNO:

xmlns:xfc="using:XamlFlair.Controls"

مساحة الاسم WPF:

xmlns:xfc="clr-namespace:XamlFlair.Controls;assembly=XamlFlair.WPF"

تختلف عناصر الرسوم في القوائم قليلاً عن تحريك عنصر واجهة المستخدم النموذجي. السبب الرئيسي لهذا الاختلاف هو أنه لا يمكن تغيير قيمة Event على AnimationSettings المقابلة من قيمتها الافتراضية. لذلك فإن ما يلي غير صالح :

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations:Items= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=Visibility} " />

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

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.AnimateOnLoad= " False "
                      ... />

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.AnimateOnItemsSourceChange= " False "
                      ... />

بشكل افتراضي ، فإن الرسوم المتحركة العناصر لها تأخير قدره 25 ميلي ثانية بين كل عنصر. يمكن تغيير هذه القيمة باستخدام خاصية InterElementDelay :

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.InterElementDelay= " 50 "
                      ... />

تمامًا مثل PrimaryBinding والتعبئة SecondaryBinding ، يمكن تشغيل الرسوم المتحركة عناصر عن طريق الربط باستخدام خاصية ItemsBinding :

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.AnimateOnLoad= " False "
                      xf:Animations.ItemsBinding= " {Binding MyViewModelProperty} "
                      xf:Animations:Items= " {xf:Animate BasedOn={StaticResource FadeIn}} " />

تحذير ( UWP فقط ) : كن على علم أنه إذا كان لديك أي ItemContainerTransitions تم تعيينها على AnimatedListView أو AnimatedGridView ، فسيتم مسحها. يتم ذلك لتجنب الرسوم المتحركة المتعارضة.

ملاحظة ( UNO فقط ) : لتجنب أي وميض على الرسوم المتحركة للبند ، يوجد حاليًا قيدًا في المكان: يجب أن تحتوي Items المتحركة على FadeFrom .

يوسع

XamlFlair

Xamlflair

عرض

يدعمني

محتويات

تثبيت من nuget

ميزات نظرة عامة

المفاهيم الأساسية

الاستخدام

أنواع الرسوم المتحركة الأساسية

يختفي

يترجم

حجم

تناوب

طمس ( UWP و WPF فقط )

تشبع ( UWP فقط )

Tint ( UWP فقط )

اللون ( WPF و UNO فقط )

دوار ( UWP فقط )

الرسوم المتحركة الملونة ( WPF و UNO فقط )

تجاوز القيم الافتراضية العالمية

استخدام ResourceDictionary لإعدادات الأساس

الرسوم المتحركة الافتراضية ( WPF فقط )

خاصية TransformOn ( WPF فقط )

دورات المنظور ( UWP فقط )

الجمع بين الرسوم المتحركة

القيم الغالبة

الترجمات النسبية على محاور x و y

الرسوم المتحركة المركبة

تكرار الرسوم المتحركة

الأحداث

روابط

أوامر الانتهاء الأولية والثانوية

باستخدام خاصية StartWith

باستخدام خاصية AllowOpacityReset ( WPF فقط )

باستخدام خاصية ClipToBounds ( UWP و UNO فقط )

تصحيح الرسوم المتحركة

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

ListViewBase ( UWP و UNO ) والرسوم المتحركة القائمة ListBox ( WPF )

استخدام `ResourceDictionary` لإعدادات الأساس

خاصية `TransformOn` ( WPF فقط )

باستخدام خاصية `StartWith`

باستخدام خاصية `AllowOpacityReset` ( WPF فقط )

باستخدام خاصية `ClipToBounds` ( UWP و UNO فقط )

`ListViewBase` ( UWP و UNO ) والرسوم المتحركة القائمة `ListBox` ( WPF )