Maui: [Especificação] Transições

Criado em 18 mai. 2020 · 7Comentários · Fonte: dotnet/maui

Transições

Maui já tem uma API de animações completa, permitindo que você crie um conteúdo dinâmico e fluido em uma página. No entanto, o que acontece ao navegar entre as páginas?

Esta especificação define uma API de transição Maui. Temos dois tipos de transições bem diferenciadas:

Transições tradicionais : Tradicionalmente, as transições entre páginas diferentes envolvem transições de entrada e saída que animam hierarquias de visualização inteiras, independentes umas das outras.
Transições de elementos compartilhados : muitas vezes, há elementos comuns a ambas as atividades e fornecer a capacidade de fazer a transição desses elementos compartilhados separadamente enfatiza a continuidade entre as transições e quebra os limites da atividade conforme o usuário navega no aplicativo.

shared_transitions

API

Transições tradicionais

Para as transições tradicionais, precisamos de uma nova enumeração com as transições compatíveis:

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

E inclua novas propriedades na página para permitir transições de página usando NavigationPage e Shell:

TransitionType : o efeito de transição usado.
TransitionDuration : a duração da transição em milissegundos.

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

Transições de elementos compartilhados

Por outro lado, precisamos de uma maneira de permitir as transições de elementos compartilhados. A chave é uma forma de _ "vincular" _ o mesmo item disponível em duas páginas diferentes.

Teremos a propriedade TransitionTag anexada aos elementos suportados herdados de View:

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

O uso seria:

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

Marque o controle para fazer a transição na página de origem.

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

E marque o controle para fazer a transição na página de destino.

Cenários

Vamos ver alguns exemplos.

Exemplo XAML

Um exemplo usando transições entre páginas:

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

Um exemplo usando elementos de transição compartilhados:

Página 1:

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

Página 2:

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

Notas

O TransitionTag na página de origem e destino precisa corresponder para exibir a transição.
Você pode animar várias visualizações de uma vez, mas cada TransitionTag em uma página precisa ser exclusivo.

Dificuldade: Média

animation 🎬 enhancement proposal-open

Fonte

jsuarezruiz

👍21 ❤8

Comentários muito úteis

Em relação às transições compartilhadas, observe que, se você deseja fazer uma transição de uma lista de itens (por exemplo, uma Collectionview), a propriedade "TransitionTag" pode não ser suficiente para identificar a visualização que você deseja animar.

Imagine um DataTemplate com uma lista de itens contendo uma imagem e um texto, cada imagem é diferente, mas a TransitionTag é sempre a mesma (por exemplo: "ImageToTransition").

Quando você toca em um elemento, o Navigation Renderer precisa saber exatamente qual elemento precisa ser traduzido e, se você tiver uma única tag para todas as suas imagens em CollectionView, isso pode ser um problema.

No meu plugin, resolvi usar uma propriedade TransitionGroup que uso para identificar o elemento a ser traduzido.

Eu gostaria de contribuir com esse recurso, mas meu código para Android não é estável o suficiente (há problemas com ChildFragments ao usar TabbedPages / MasterPage, mas no shell eu acho que está bom), também no iOS eu uso alguns hacks para fazer boas transições .

Eu retrabalhei muito código da primeira versão e agora parece melhor, mas não acho que seja bom o suficiente para ir no núcleo, mas estou pronto para ajudar e contribuir, se necessário
https://github.com/GiampaoloGabba/Xamarin.Plugin.SharedTransitions

GiampaoloGabba em 19 mai. 2020

❤8

Todos 7 comentários

Sugestão

Talvez uma propriedade que recebe uma animação em vez de enum ?
Para poder estender e receber animações personalizadas que precisam implementar alguma interface ITransitionAnimation .
E algumas animações predefinidas para usar como NamedSize em fontes

Exemplo:

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

Ou "Transições nomeadas" predefinidas

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

felipebaltazar em 19 mai. 2020

👍2

Imagine um DataTemplate com uma lista de itens contendo uma imagem e um texto, cada imagem é diferente, mas a TransitionTag é sempre a mesma (por exemplo: "ImageToTransition").

No meu plugin, resolvi usar uma propriedade TransitionGroup que uso para identificar o elemento a ser traduzido.

GiampaoloGabba em 19 mai. 2020

❤8

A propósito, muito do meu código poderia ser bastante simplificado se algumas propriedades pudessem ser integradas ao núcleo principal

GiampaoloGabba em 19 mai. 2020

❤2

@felipebaltazar Pode ser algo parecido com a proposta de criar transições customizadas no TabView https://github.com/xamarin/Xamarin.Forms/issues/10773 Farei alguns testes e depois faremos uma revisão das Spec.

@GiampaoloGabba Com certeza será ótimo receber seus comentários sobre esta API. Se você quiser contribuir, como no Xamarin.Forms aceitaremos PRs e teremos o maior prazer em ajudá-lo. Sobre o parâmetro que você indica para coleções, eu revisei e você está certo. Mnn, podemos adicionar uma propriedade extra para cobrir esses casos ( TransitionGroup ), ou talvez internamente, se o pai do elemento for uma coleção, criar o grupo automaticamente.

jsuarezruiz em 21 mai. 2020

❤3

ou talvez internamente, se o pai do elemento for uma coleção, crie o grupo automaticamente.

Tentei essa abordagem, mas foi um pouco difícil. Por exemplo, em uma visualização de coleção, podemos iniciar uma navegação com base na alteração de SelectedItem.
Era muito mais fácil "dar um tapa" em uma propriedade para agrupamento e depois deixar o usuário decidir quando e como usá-la :)

A propósito, estou planejando escrever aqui um pequeno documento cobrindo a arquitetura de base que usei para desenvolver isso (como rastrear as transições e como fazer isso acontecer no iOS, porque não há suporte nativo para isso e eu tive que desenvolver tudo manualmente , embora seja muito mais fácil no Android, se você excluir fragmentos filhos gerados por tappedpage e MasterDetail)

Para o caso de haver algumas boas ideias para portar aqui e excluir as ruins, que, tenho certeza, serão muitas :)

GiampaoloGabba em 21 mai. 2020

❤2

Parece bom @GiampaoloGabba , obrigado!

jsuarezruiz em 21 mai. 2020

@felipebaltazar Pode ser algo parecido com a proposta de criar transições customizadas no TabView xamarin / Xamarin.Forms # 10773 Farei alguns testes e depois faremos uma revisão das Spec.

Soa bem!!!!
Fiz algumas animações no repositório Xamarin.Forms.Skeleton , talvez ajude para novas ideias ... Não sei ...

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

felipebaltazar em 21 mai. 2020

👍3

Esta página foi útil?

0 / 5 - 0 avaliações