Maui: [कल्पना] संक्रमण

को निर्मित 18 मई 2020 · 7टिप्पणियाँ · स्रोत: dotnet/maui

बदलाव

माउ में पहले से ही एक पूर्ण एनिमेशन एपीआई है जो आपको एक पृष्ठ पर एक जीवंत और तरल सामग्री बनाने की अनुमति देता है। हालांकि, पृष्ठों के बीच नेविगेट करने पर क्या होता है?.

यह युक्ति एक माउ संक्रमण एपीआई को परिभाषित करती है। हमारे पास दो प्रकार के अच्छी तरह से विभेदित संक्रमण हैं:

पारंपरिक संक्रमण : पारंपरिक रूप से शामिल विभिन्न पृष्ठों के बीच संक्रमण में प्रवेश और निकास संक्रमण होते हैं जो एक दूसरे से स्वतंत्र संपूर्ण दृश्य पदानुक्रम को एनिमेटेड करते हैं।
साझा तत्व संक्रमण : कई बार, दोनों गतिविधियों के लिए सामान्य तत्व होते हैं और इन साझा तत्वों को अलग-अलग संक्रमण करने की क्षमता प्रदान करते हैं, संक्रमणों के बीच निरंतरता पर जोर देते हैं और गतिविधि की सीमाओं को तोड़ते हैं क्योंकि उपयोगकर्ता ऐप को नेविगेट करता है।

shared_transitions

एपीआई

पारंपरिक संक्रमण

पारंपरिक संक्रमणों के लिए, हमें समर्थित संक्रमणों के साथ एक नई गणना की आवश्यकता है:

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

और, पृष्ठ में नए गुणों NavigationPage और शेल का उपयोग कर पृष्ठ संक्रमण अनुमति देने के लिए शामिल हैं:

TransitionType : उपयोग किए गए संक्रमण प्रभाव।
TransitionDuration : मिलीसेकंड में ट्रांज़िशन अवधि।

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); }
}

साझा तत्व संक्रमण

दूसरी ओर, हमें साझा तत्व संक्रमण की अनुमति देने के लिए एक तरीके की आवश्यकता है। कुंजी दो अलग-अलग पृष्ठों में उपलब्ध एक ही आइटम को _"लिंक"_ करने का एक तरीका है।

हमारे पास View से विरासत में मिले समर्थित तत्वों के लिए 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" />

और नियंत्रण को गंतव्य पृष्ठ में संक्रमण के लिए टैग करें।

परिदृश्यों

आइए कुछ उदाहरण देखें।

एक्सएएमएल उदाहरण

पृष्ठों के बीच संक्रमण का उपयोग करने वाला एक नमूना:

<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

सबसे उपयोगी टिप्पणी

साझा संक्रमणों के संबंध में, कृपया ध्यान दें कि यदि आप वस्तुओं की सूची (उदाहरण के लिए एक संग्रहदृश्य) से संक्रमण करना चाहते हैं तो "ट्रांज़िशनटैग" संपत्ति उस दृश्य की पहचान करने के लिए पर्याप्त नहीं हो सकती है जिसे आप एनिमेट करना चाहते हैं।

छवि और टेक्स्ट वाली वस्तुओं की सूची के साथ एक डेटा टेम्पलेट की कल्पना करें, प्रत्येक छवि अलग होती है लेकिन ट्रांज़िशनटैग हमेशा समान होता है (उदाहरण के लिए: "ImageToTransition")।

जब आप किसी तत्व को टैप करते हैं, तो नेविगेशन रेंडरर को यह जानने की आवश्यकता होती है कि किस तत्व का अनुवाद करने की आवश्यकता है, और यदि आपके पास CollectionView में आपकी सभी छवियों के लिए एक ही टैग है तो यह एक समस्या हो सकती है।

मेरी प्लगइन में मैंने एक TransitionGroup प्रॉपर्टी का उपयोग करके हल किया है जिसका उपयोग मैं अनुवाद करने के लिए तत्व की पहचान करने के लिए करता हूं।

मैं इस सुविधा में योगदान देना चाहता हूं लेकिन एंड्रॉइड के लिए मेरा कोड पर्याप्त स्थिर नहीं है (टैबडपेज/मास्टरपेज का उपयोग करते समय चाइल्डफ्रैगमेंट के साथ समस्याएं हैं, लेकिन खोल में मुझे लगता है कि ठीक है), आईओएस में भी मैं कुछ हैक्स पर मुकदमा करता हूं ताकि अच्छा बदलाव हो सके आकार .

मैंने पहले संस्करण से बहुत सारे कोड को फिर से काम किया और अब बेहतर दिखता है लेकिन मुझे नहीं लगता कि कोर में जाने के लिए पर्याप्त है, लेकिन यदि आवश्यक हो तो मैं मदद करने और योगदान करने के लिए तैयार हूं
https://github.com/GiampaoloGabba/Xamarin.Plugin.SharedTransitions

GiampaoloGabba 19 मई 2020

❤8

सभी 7 टिप्पणियाँ

सुझाव

शायद एक संपत्ति जो enum बजाय एनीमेशन प्राप्त करती है?
कुछ ITransitionAnimation इंटरफ़ेस को लागू करने के लिए आवश्यक अनुकूलित एनिमेशन को विस्तारित करने और प्राप्त करने में सक्षम होने के लिए।
और फोंट पर NamedSize जैसे उपयोग करने के लिए कुछ पूर्वनिर्धारित एनिमेशन

उदाहरण:

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

या पूर्वनिर्धारित "नामित संक्रमण"

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

felipebaltazar 19 मई 2020

👍2

GiampaoloGabba 19 मई 2020

❤8

बीटीडब्ल्यू अगर कुछ गुणों को मुख्य कोर में एकीकृत किया जा सकता है तो मेरे बहुत से कोड को बहुत सरल बनाया जा सकता है

GiampaoloGabba 19 मई 2020

❤2

@felipebaltazar यह https://github.com/xamarin/Xamarin.Forms/issues/10773 मैं कुछ परीक्षण करूँगा और उसके बाद हम कल्पना की समीक्षा करेंगे।

@GiampaoloGabba इस एपीआई पर आपकी प्रतिक्रिया प्राप्त करना निश्चित रूप से बहुत अच्छा होगा। यदि आप योगदान देना चाहते हैं, जैसा कि Xamarin.Forms में है, तो हम पीआर स्वीकार करेंगे और मुझे आपकी मदद करने में खुशी होगी। उस पैरामीटर के बारे में जिसे आप संग्रह के लिए इंगित करते हैं, मैंने इसकी समीक्षा की है और आप सही हैं। एमएनएन, हम इन मामलों को कवर करने के लिए एक अतिरिक्त संपत्ति जोड़ सकते हैं ( TransitionGroup ), या शायद आंतरिक रूप से यदि तत्व का अभिभावक संग्रह है, तो समूह को स्वचालित रूप से बनाएं।

jsuarezruiz 21 मई 2020

❤3

या शायद आंतरिक रूप से यदि तत्व का अभिभावक संग्रह है, तो समूह को स्वचालित रूप से बनाएं।

मैंने इस दृष्टिकोण की कोशिश की लेकिन यह थोड़ा मुश्किल था। उदाहरण के लिए एक संग्रहदृश्य में हम SelectedItem परिवर्तन के आधार पर एक नेविगेशन शुरू कर सकते हैं।
समूहीकरण के लिए किसी संपत्ति को "थप्पड़" देना बहुत आसान था और फिर उपयोगकर्ता को यह तय करने दें कि इसका उपयोग कब और कैसे करना है :)

बीटीडब्ल्यू मैं यहां आधार आर्किटेक्चर को कवर करने वाला एक छोटा दस्तावेज़ लिखने की योजना बना रहा हूं जिसका उपयोग मैंने इसे विकसित करने के लिए किया था (संक्रमण को कैसे ट्रैक किया जाए और इसे आईओएस में कैसे किया जाए, क्योंकि इसके लिए मूल समर्थन नहीं है और मुझे सब कुछ हाथ से विकसित करना था , जबकि एंड्रॉइड में यह बहुत आसान है, अगर आप टैप किए गए पेज और मास्टरडिटेल द्वारा उत्पन्न बच्चे के टुकड़े को बाहर करते हैं)

बस अगर यहां पोर्ट करने और बुरे लोगों को बाहर करने के लिए कुछ अच्छे विचार हैं, जो मुझे यकीन है, बहुत कुछ होगा :)

GiampaoloGabba 21 मई 2020

❤2

अच्छा लगता है @GiampaoloGabba , धन्यवाद!

jsuarezruiz 21 मई 2020

@felipebaltazar यह TabView xamarin/Xamarin.Forms#10773 में कस्टम ट्रांज़िशन बनाने के प्रस्ताव के समान कुछ हो सकता है मैं कुछ परीक्षण करूँगा और उसके बाद हम कल्पना की समीक्षा करेंगे।

बढ़िया है!!!!
मैंने Xamarin.Forms.Skeleton रिपॉजिटरी पर कुछ एनिमेशन किए हैं, शायद यह नए विचारों के लिए मदद कर सकता है... मुझे नहीं पता...

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

felipebaltazar 21 मई 2020

👍3

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Maui: [कल्पना] संक्रमण

बदलाव

एपीआई

पारंपरिक संक्रमण

साझा तत्व संक्रमण

परिदृश्यों

एक्सएएमएल उदाहरण

टिप्पणियाँ

कठिनाई: मध्यम

सबसे उपयोगी टिप्पणी

सभी 7 टिप्पणियाँ

सुझाव

संबंधित मुद्दों