Maui: [المواصفات] الانتقالات

تم إنشاؤها على ١٨ مايو ٢٠٢٠ · 7تعليقات · مصدر: dotnet/maui

الانتقالات

لدى Maui بالفعل واجهة برمجة تطبيقات رسوم متحركة كاملة تتيح لك إنشاء محتوى مباشر وسلس على الصفحة. لكن ماذا يحدث عند التنقل بين الصفحات ؟.

تحدد هذه المواصفات واجهة برمجة تطبيقات انتقالات Maui. لدينا نوعان من التحولات المتمايزة جيدًا:

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

shared_transitions

API

التحولات التقليدية

بالنسبة للتحولات التقليدية ، نحتاج إلى تعداد جديد مع التحولات المدعومة:

public enum NavigationTransitionType
{
    None,
    Fade,
    Flip,
    Scale,
    SlideFromLeft,
    SlideFromRight,
    SlideFromTop,
    SlideFromBottom,
    Turnstile
}

وقم بتضمين خصائص جديدة في الصفحة للسماح بانتقالات الصفحة باستخدام NavigationPage و Shell:

نوع الانتقال : تأثير الانتقال المستخدم.
مدة الانتقال : مدة الانتقال بالملي ثانية.

public static readonly BindableProperty TransitionTypeProperty =
     BindableProperty.Create(nameof(TransitionType), typeof(NavigationTransitionType),   typeof(NavigationPage), PageTransitionType.None,
     BindingMode.TwoWay, null);

public NavigationTransitionType TransitionType
{
    get { return (NavigationTransitionType)GetValue(TransitionTypeProperty); }
    set { SetValue(TransitionTypeProperty, value); }
}

public static readonly BindableProperty TransitionDurationProperty =
     BindableProperty.Create(nameof(TransitionDuration), typeof(double), typeof(NavigationPage), 500d,
     BindingMode.TwoWay, null);

public double TransitionDuration
{
    get { return (double)GetValue(TransitionDurationProperty); }
    set { SetValue(TransitionDurationProperty, value); }
}

انتقالات العنصر المشترك

من ناحية أخرى ، نحتاج إلى طريقة للسماح بانتقالات العنصر المشترك. المفتاح هو طريقة _ "ربط" _ نفس العنصر المتاح في صفحتين مختلفتين.

سيكون لدينا خاصية TransitionTag المرفقة بالعناصر المدعومة الموروثة من طريقة العرض:

public static readonly BindableProperty TransitionTagProperty =    
     BindableProperty.CreateAttached("TransitionTag", typeof(int), typeof(Transition), 0,
propertyChanged: OnPropertyChanged);

سيكون الاستخدام:

<Image Source="xamarin.jpg" TransitionTag="logo" WidthRequest="100" />

ضع علامة على عنصر التحكم للانتقال في الصفحة المصدر.

<Image Source="xamarin.jpg" TransitionTag="logo" WidthRequest="300" />

وقم بتمييز عنصر التحكم للانتقال في صفحة الوجهة.

سيناريوهات

دعونا نرى بعض الأمثلة.

مثال XAML

عينة باستخدام الانتقالات بين الصفحات:

<ContentPage
     TransitionType=“SlideFromBottom”
     TransitionDuration="750" />

عينة باستخدام عناصر انتقالية مشتركة:

صفحة 1:

<Image  
     Source="xamagon_preview.png"
     TransitionTag="xamagon"/>

الصفحة 2:

<Image  
     Source="xamagon.png"
     TransitionTag="xamagon"/>

ملحوظات

يجب أن تتطابق صفحة المصدر والوجهة TransitionTag لعرض الانتقال.
يمكنك تحريك العديد من العروض دفعة واحدة ، ولكن يجب أن يكون كل TransitionTag في الصفحة فريدًا.

الصعوبة: متوسطة

animation 🎬 enhancement proposal-open

مصدر

jsuarezruiz

👍21 ❤8

التعليق الأكثر فائدة

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

تخيل DataTemplate بقائمة من العناصر التي تحتوي على صورة ونص ، كل صورة مختلفة ولكن TransitionTag هي نفسها دائمًا (على سبيل المثال: "ImageToTransition").

عندما تنقر على عنصر ، يحتاج برنامج Navigation Renderer إلى معرفة العنصر المطلوب ترجمته بالضبط ، وإذا كان لديك علامة واحدة لجميع صورك في CollectionView ، فقد تكون هذه مشكلة.

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

أرغب في المساهمة في هذه الميزة ولكن الكود الخاص بي لنظام Android ليس مستقرًا بدرجة كافية (توجد مشكلات في ChildFragments عند استخدام TabbedPages / MasterPage ، ولكن في shell أعتقد أنه جيد) ، أيضًا في iOS أقوم بمقاضاة بعض الاختراقات لجعل شكل انتقالات جيد .

لقد قمت بإعادة صياغة الكثير من التعليمات البرمجية من الإصدار الأول ويبدو الآن أفضل ولكني لا أعتقد أنها جيدة بما يكفي للدخول في جوهرها ، لكنني على استعداد للمساعدة والمساهمة إذا لزم الأمر
https://github.com/GiampaoloGabba/Xamarin.Plugin.SharedTransitions

GiampaoloGabba في ١٩ مايو ٢٠٢٠

❤8

ال 7 كومينتر

اقتراح

ربما الخاصية التي تتلقى الرسوم المتحركة بدلا من enum ؟
لتتمكن من تمديد واستقبال الرسوم المتحركة المخصصة التي تحتاج إلى تنفيذ واجهة ITransitionAnimation .
وبعض الحركات المحددة مسبقًا لاستخدامها مثل NamedSize على الخطوط

مثال:

<ContentPage
     Transition=“{local:MyCustomTransition}"
     TransitionDuration="750" />

أو "انتقالات مسماة" محددة مسبقًا

<ContentPage
     Transition=“Fade"
     TransitionDuration="750" />

felipebaltazar في ١٩ مايو ٢٠٢٠

👍2

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

GiampaoloGabba في ١٩ مايو ٢٠٢٠

❤8

بالمناسبة ، يمكن تبسيط الكثير من التعليمات البرمجية الخاصة بي بشكل كبير إذا كان من الممكن دمج بعض الخصائص في النواة الرئيسية

GiampaoloGabba في ١٩ مايو ٢٠٢٠

❤2

felipebaltazar قد يكون شيئًا مشابهًا لاقتراح إنشاء انتقالات مخصصة في TabView https://github.com/xamarin/Xamarin.Forms/issues/10773 سأقوم ببعض الاختبارات وبعد ذلك سنراجع المواصفات.

GiampaoloGabba سيكون رائعًا بالتأكيد أن يكون لديك ملاحظاتك حول واجهة برمجة التطبيقات هذه. إذا كنت ترغب في المساهمة ، كما هو الحال في Xamarin.Forms ، فسوف نقبل العلاقات العامة وسيسعدني مساعدتك. حول المعلمة التي تحددها للمجموعات ، لقد راجعتها وأنت على حق. Mnn ، يمكننا إضافة خاصية إضافية لتغطية هذه الحالات ( TransitionGroup ) ، أو ربما داخليًا إذا كان أصل العنصر عبارة عن مجموعة ، فقم بإنشاء المجموعة تلقائيًا.

jsuarezruiz في ٢١ مايو ٢٠٢٠

❤3

أو ربما داخليًا إذا كان أصل العنصر عبارة عن مجموعة ، فأنشئ المجموعة تلقائيًا.

لقد جربت هذا النهج ولكنه كان صعبًا بعض الشيء. على سبيل المثال في عرض المجموعة يمكننا بدء التنقل بناءً على تغيير العنصر المحدد.
كان من الأسهل بكثير "صفعة" خاصية للتجميع ثم السماح للمستخدم بتحديد وقت وكيفية استخدامها :)

بالمناسبة ، أخطط لكتابة مستند صغير هنا يغطي البنية الأساسية التي استخدمتها لتطوير هذا (كيفية تتبع التحولات وكيفية تحقيق ذلك في iOS ، لأنه لا يوجد دعم محلي لذلك وكان علي تطوير كل شيء يدويًا ، في حين أنه أسهل بكثير في Android ، إذا قمت باستبعاد الأجزاء الفرعية التي تم إنشاؤها بواسطة tappedpage و MasterDetail)

فقط في حالة وجود بعض الأفكار الجيدة التي يمكن نقلها هنا واستبعاد الأفكار السيئة ، وأنا متأكد من أنها ستكون كثيرة :)

GiampaoloGabba في ٢١ مايو ٢٠٢٠

❤2

يبدو جيدًا GiampaoloGabba ، شكرًا!

jsuarezruiz في ٢١ مايو ٢٠٢٠

felipebaltazar قد يكون شيئًا مشابهًا لاقتراح إنشاء انتقالات مخصصة في TabView xamarin / Xamarin.Forms # 10773 سأقوم ببعض الاختبارات وبعد ذلك سنراجع المواصفات.

يبدو جيدا!!!!
لقد قمت بعمل بعض الرسوم المتحركة على مستودع Xamarin.Forms.Skeleton ، ربما يمكن أن تساعد في الأفكار الجديدة ... لا أعرف ...

https://github.com/HorusSoftwareUY/Xamarin.Forms.Skeleton

felipebaltazar في ٢١ مايو ٢٠٢٠

👍3

هل كانت هذه الصفحة مفيدة؟

0 / 5 - 0 التقييمات