Maui: [Spec] Übergänge

Erstellt am 18. Mai 2020  ·  7Kommentare  ·  Quelle: dotnet/maui

Übergänge

Maui verfügt bereits über eine vollständige Animations-API, mit der Sie einen lebendigen und flüssigen Inhalt auf einer Seite erstellen können. Was passiert jedoch beim Navigieren zwischen den Seiten?.

Diese Spezifikation definiert eine Maui- Übergangs-API . Wir haben zwei Arten von gut differenzierten Übergängen:

  • Herkömmliche Übergänge : Herkömmliche Übergänge zwischen verschiedenen Seiten betrafen Ein- und Ausstiegsübergänge, die ganze Ansichtshierarchien unabhängig voneinander animierten.
  • Übergänge gemeinsam genutzter Elemente: Oftmals gibt es Elemente, die beiden Aktivitäten gemeinsam sind, und die Möglichkeit, diese gemeinsam genutzten Elemente separat zu übergehen, betont die Kontinuität zwischen den Übergängen und durchbricht die Aktivitätsgrenzen, während der Benutzer durch die App navigiert.

shared_transitions

API

Traditionelle Übergänge

Für die traditionellen Übergänge benötigen wir eine neue Aufzählung mit den unterstützten Übergängen:

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

Und fügen Sie neue Eigenschaften in die Seite ein , um Seitenübergänge mit NavigationPage und Shell zu ermöglichen:

  • TransitionType : Der verwendete Übergangseffekt.
  • TransitionDuration : Die Übergangsdauer in Millisekunden.
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); }
}

Gemeinsame Elementübergänge

Auf der anderen Seite brauchen wir eine Möglichkeit, die Übergänge der gemeinsamen Elemente zuzulassen. Der Schlüssel ist eine Möglichkeit, das gleiche Element auf zwei verschiedenen Seiten zu _"verlinken"_.

Wir haben die TransitionTag- Eigenschaft an die unterstützten Elemente angehängt, die von View geerbt wurden:

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

Die Verwendung wäre:

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

Markieren Sie das Steuerelement für den Übergang auf der Quellseite.

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

Und markieren Sie das Steuerelement für den Übergang auf der Zielseite.

Szenarien

Sehen wir uns einige Beispiele an.

XAML-Beispiel

Ein Beispiel mit Übergängen zwischen Seiten:

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

Ein Beispiel mit gemeinsam genutzten Übergangselementen:

Seite 1:

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

Seite 2:

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

Anmerkungen

  • Die TransitionTag auf Quell- und Zielseite müssen übereinstimmen, um den Übergang anzuzeigen.
  • Sie können mehrere Ansichten gleichzeitig animieren, aber jedes TransitionTag auf einer Seite muss eindeutig sein.

Schwierigkeit : Mittel

animation 🎬 enhancement proposal-open
Quelle
picture jsuarezruiz
👍21 ❤8

Hilfreichster Kommentar

Beachten Sie bei gemeinsamen Übergängen, dass die Eigenschaft "TransitionTag" möglicherweise nicht ausreicht, um die zu animierende Ansicht zu identifizieren, wenn Sie einen Übergang aus einer Liste von Elementen (z. B. einer Sammlungsansicht) erstellen möchten.

Stellen Sie sich eine DataTemplate mit einer Liste von Elementen vor, die ein Bild und einen Text enthält, jedes Bild ist anders, aber das TransitionTag ist immer gleich (zum Beispiel: "ImageToTransition").

Wenn Sie auf ein Element tippen, muss der Navigationsrenderer genau wissen, welches Element übersetzt werden muss, und wenn Sie ein einzelnes Tag für alle Ihre Bilder in der CollectionView haben, kann dies ein Problem sein.

In meinem Plugin habe ich eine TransitionGroup-Eigenschaft verwendet, die ich verwende, um das zu übersetzende Element zu identifizieren.

Ich würde gerne zu dieser Funktion beitragen, aber mein Code für Android ist nicht stabil genug (es gibt Probleme mit ChildFragments bei der Verwendung von TabbedPages/MasterPage, aber in der Shell denke ich, dass es in Ordnung ist), auch in iOS verwende ich einige Hacks, um gute Übergänge zu gestalten .

Ich habe viel Code aus der ersten Version überarbeitet und sieht jetzt besser aus, aber ich denke nicht, dass es gut genug ist, um in den Kern zu gehen, aber ich bin bereit zu helfen und bei Bedarf beizutragen
https://github.com/GiampaoloGabba/Xamarin.Plugin.SharedTransitions

picture GiampaoloGabba am 19. Mai 2020
❤8

Alle 7 Kommentare

Anregung

Vielleicht eine Eigenschaft, die eine Animation anstelle eines enum empfängt?
Um benutzerdefinierte Animationen erweitern und empfangen zu können, die eine ITransitionAnimation Schnittstelle implementieren müssen.
Und einige vordefinierte Animationen wie NamedSize für Schriftarten

Beispiel:

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

Oder vordefinierte "Benannte Übergänge"

<ContentPage
     Transition=“Fade"
     TransitionDuration="750" />
felipebaltazar picture felipebaltazar am 19. Mai 2020
👍2

Beachten Sie bei gemeinsamen Übergängen, dass die Eigenschaft "TransitionTag" möglicherweise nicht ausreicht, um die zu animierende Ansicht zu identifizieren, wenn Sie einen Übergang aus einer Liste von Elementen (z. B. einer Sammlungsansicht) erstellen möchten.

Stellen Sie sich eine DataTemplate mit einer Liste von Elementen vor, die ein Bild und einen Text enthält, jedes Bild ist anders, aber das TransitionTag ist immer gleich (zum Beispiel: "ImageToTransition").

Wenn Sie auf ein Element tippen, muss der Navigationsrenderer genau wissen, welches Element übersetzt werden muss, und wenn Sie ein einzelnes Tag für alle Ihre Bilder in der CollectionView haben, kann dies ein Problem sein.

In meinem Plugin habe ich eine TransitionGroup-Eigenschaft verwendet, die ich verwende, um das zu übersetzende Element zu identifizieren.

Ich würde gerne zu dieser Funktion beitragen, aber mein Code für Android ist nicht stabil genug (es gibt Probleme mit ChildFragments bei der Verwendung von TabbedPages/MasterPage, aber in der Shell denke ich, dass es in Ordnung ist), auch in iOS verwende ich einige Hacks, um gute Übergänge zu gestalten .

Ich habe viel Code aus der ersten Version überarbeitet und sieht jetzt besser aus, aber ich denke nicht, dass es gut genug ist, um in den Kern zu gehen, aber ich bin bereit zu helfen und bei Bedarf beizutragen
https://github.com/GiampaoloGabba/Xamarin.Plugin.SharedTransitions

GiampaoloGabba picture GiampaoloGabba am 19. Mai 2020
❤8

Übrigens könnte ein Großteil meines Codes stark vereinfacht werden, wenn einige Eigenschaften in den Hauptkern integriert werden können

GiampaoloGabba picture GiampaoloGabba am 19. Mai 2020
❤2

@felipebaltazar Es könnte dem Vorschlag ähnlich sein, benutzerdefinierte Übergänge in TabView zu erstellen https://github.com/xamarin/Xamarin.Forms/issues/10773 Ich werde einige Tests durchführen und danach werden wir die Spec.

@GiampaoloGabba Es wird auf jeden Fall großartig sein, Ihr Feedback zu dieser API zu haben. Wenn Sie einen Beitrag leisten möchten, nehmen wir wie in Xamarin.Forms PRs an und ich helfe Ihnen gerne. Über den Parameter, den Sie für Sammlungen angeben, habe ich ihn überprüft und Sie haben Recht. Mnn, wir können eine zusätzliche Eigenschaft hinzufügen, um diese Fälle abzudecken ( TransitionGroup ), oder vielleicht intern, wenn das Elternelement des Elements eine Sammlung ist, die Gruppe automatisch erstellen.

jsuarezruiz picture jsuarezruiz am 21. Mai 2020
❤3

oder vielleicht intern, wenn das Elternelement des Elements eine Sammlung ist, erstellen Sie die Gruppe automatisch.

Ich habe diesen Ansatz versucht, aber es war ein bisschen schwierig. Zum Beispiel können wir in einer Sammlungsansicht eine Navigation basierend auf der SelectedItem-Änderung starten.
Es war viel einfacher, eine Eigenschaft zum Gruppieren zu "klatschen" und dann den Benutzer entscheiden zu lassen, wann und wie er sie verwendet :)

Übrigens, ich habe vor, hier ein kleines Dokument zu schreiben, das die Basisarchitektur behandelt, die ich verwendet habe, um dies zu entwickeln (wie man Übergänge verfolgt und wie man es in iOS macht, weil es dafür keine native Unterstützung gibt und ich alles von Hand entwickeln musste , während es in Android viel einfacher ist, wenn Sie untergeordnete Fragmente ausschließen, die von tappedpage und MasterDetail generiert wurden)

Nur für den Fall, dass es vielleicht ein paar gute Ideen gibt, hier zu portieren und die schlechten auszuschließen, was sicher viele sein werden :)

GiampaoloGabba picture GiampaoloGabba am 21. Mai 2020
❤2

Klingt gut @GiampaoloGabba , danke!

jsuarezruiz picture jsuarezruiz am 21. Mai 2020

@felipebaltazar Es könnte dem Vorschlag zum Erstellen benutzerdefinierter Übergänge in TabView xamarin/Xamarin.Forms# 10773

Hört sich gut an!!!!
Ich habe einige Animationen im Xamarin.Forms.Skeleton Repository erstellt, vielleicht kann es für neue Ideen helfen ... Ich weiß nicht ...

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

felipebaltazar picture felipebaltazar am 21. Mai 2020
👍3
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

Amine-Smahi picture Amine-Smahi  ·  3Kommentare
Suplanus picture Suplanus  ·  4Kommentare
4creators picture 4creators  ·  31Kommentare
mhrastegary77 picture mhrastegary77  ·  3Kommentare
PureWeen picture PureWeen  ·  21Kommentare