Maui: [Spec] Transiciones

Creado en 18 may. 2020 · 7Comentarios · Fuente: dotnet/maui

Transiciones

Maui ya tiene una API de animaciones completa que le permite crear un contenido en vivo y fluido en una página. Sin embargo, ¿qué sucede al navegar entre páginas ?.

Esta especificación define una API de transiciones de Maui. Tenemos dos tipos de transiciones bien diferenciadas:

Transiciones tradicionales : tradicionalmente, las transiciones entre diferentes páginas implicaban transiciones de entrada y salida que animaban jerarquías de vista completas independientes entre sí.
Transiciones de elementos compartidos : muchas veces, hay elementos comunes a ambas actividades y proporcionar la capacidad de realizar la transición de estos elementos compartidos por separado enfatiza la continuidad entre las transiciones y rompe los límites de la actividad a medida que el usuario navega por la aplicación.

shared_transitions

API

Transiciones tradicionales

Para las transiciones tradicionales, necesitamos una nueva enumeración con las transiciones admitidas:

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

E incluya nuevas propiedades en la página para permitir las transiciones de página utilizando NavigationPage y Shell:

TransitionType : el efecto de transición utilizado.
TransitionDuration : la duración de la transición en milisegundos.

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

Transiciones de elementos compartidos

Por otro lado, necesitamos una forma de permitir las transiciones de elementos compartidos. La clave es una forma de _ "vincular" _ el mismo artículo disponible en dos páginas diferentes.

Tendremos la propiedad adjunta TransitionTag a los elementos compatibles heredados de View:

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

El uso sería:

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

Etiquete el control para realizar la transición en la página de origen.

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

Y etiquete el control para realizar la transición en la página de destino.

Escenarios

Veamos algunos ejemplos.

Ejemplo de XAML

Una muestra que usa transiciones entre páginas:

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

Una muestra que utiliza elementos de transiciones compartidos:

Página 1:

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

Página 2:

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

Notas

El TransitionTag en la página de origen y destino debe coincidir para mostrar la transición.
Puede animar varias vistas a la vez, pero cada TransitionTag en una página debe ser único.

Dificultad: media

animation 🎬 enhancement proposal-open

Fuente

jsuarezruiz

👍21 ❤8

Comentario más útil

Con respecto a las transiciones compartidas, tenga en cuenta que si desea realizar una transición desde una lista de elementos (por ejemplo, una vista de colección), la propiedad "TransitionTag" podría no ser suficiente para identificar la vista que desea animar.

Imagine un DataTemplate con una lista de elementos que contienen una imagen y un texto, cada imagen es diferente pero el TransitionTag es siempre el mismo (por ejemplo: "ImageToTransition").

Cuando toca un elemento, el representador de navegación necesita saber exactamente qué elemento debe traducirse, y si tiene una sola etiqueta para todas sus imágenes en CollectionView, esto podría ser un problema.

En mi complemento, resolví usar una propiedad TransitionGroup que uso para identificar el elemento a traducir.

Me gustaría contribuir a esta función, pero mi código para Android no es lo suficientemente estable (hay problemas con ChildFragments al usar TabbedPages / MasterPage, pero en shell creo que está bien), también en iOS demando algunos trucos para hacer buenas transiciones de forma .

Modifiqué mucho código de la primera versión y ahora se ve mejor, pero no creo que sea lo suficientemente bueno como para entrar en el núcleo, pero estoy listo para ayudar y contribuir si es necesario.
https://github.com/GiampaoloGabba/Xamarin.Plugin.SharedTransitions

GiampaoloGabba en 19 may. 2020

❤8

Todos 7 comentarios

Sugerencia

¿Quizás una propiedad que recibe una animación en lugar de enum ?
Para poder extender y recibir animaciones personalizadas que necesitan implementar alguna interfaz ITransitionAnimation .
Y algunas animaciones predefinidas para usar como NamedSize en fuentes

Ejemplo:

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

O "Transiciones con nombre" predefinidas

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

felipebaltazar en 19 may. 2020

👍2

Imagine un DataTemplate con una lista de elementos que contienen una imagen y un texto, cada imagen es diferente pero el TransitionTag es siempre el mismo (por ejemplo: "ImageToTransition").

En mi complemento, resolví usar una propiedad TransitionGroup que uso para identificar el elemento a traducir.

GiampaoloGabba en 19 may. 2020

❤8

Por cierto, gran parte de mi código podría simplificarse enormemente si algunas propiedades se pueden integrar en el núcleo principal

GiampaoloGabba en 19 may. 2020

❤2

@felipebaltazar Podría ser algo similar a la propuesta de crear transiciones personalizadas en TabView https://github.com/xamarin/Xamarin.Forms/issues/10773 Haré algunas pruebas y luego revisaremos el Spec.

@GiampaoloGabba Definitivamente será genial tener tus comentarios sobre esta API. Si quieres contribuir, como en Xamarin.Forms aceptaremos PRs y estaré encantado de ayudarte. Sobre el parámetro que indicas para las colecciones, lo he revisado y tienes razón. Mnn, podemos agregar una propiedad adicional para cubrir estos casos ( TransitionGroup ), o quizás internamente si el padre del elemento es una colección, crear el grupo automáticamente.

jsuarezruiz en 21 may. 2020

❤3

o quizás internamente si el padre del elemento es una colección, cree el grupo automáticamente.

Probé este enfoque pero fue un poco difícil. Por ejemplo, en una vista de colección, podemos iniciar una navegación basada en el cambio de SelectedItem.
Fue mucho más fácil "abofetear" una propiedad para agrupar y luego dejar que el usuario decida cuándo y cómo usarla :)

Por cierto, planeo escribir aquí un pequeño documento que cubra la arquitectura base que usé para desarrollar esto (cómo rastrear las transiciones y cómo hacer que suceda en iOS, porque no hay soporte nativo para eso y tuve que desarrollar todo a mano , aunque es mucho más fácil en Android, si excluye los fragmentos secundarios generados por tappedpage y MasterDetail)

En caso de que haya algunas buenas ideas para portar aquí y excluir las malas, que, estoy seguro, serán muchas :)

GiampaoloGabba en 21 may. 2020

❤2

Suena bien @GiampaoloGabba , ¡gracias!

jsuarezruiz en 21 may. 2020

@felipebaltazar Podría ser algo similar a la propuesta de crear transiciones personalizadas en TabView xamarin / Xamarin.Forms # 10773 Haré algunas pruebas y luego revisaremos el Spec.

¡¡¡¡Suena bien!!!!
He hecho algunas animaciones en el repositorio Xamarin.Forms.Skeleton , tal vez pueda ayudar con nuevas ideas ... No sé ...

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

felipebaltazar en 21 may. 2020

👍3

¿Fue útil esta página

0 / 5 - 0 calificaciones