w w w. l a m b d a 3 . c o m .b r

Animation com Forms/Custom Renderers

Mahmoud Ali – Desenvolvedor@akamud

Xamarin.Forms• Vai além do reaproveitamento de código de UI• Framework com recursos poderosos• Animations API• Custom Renderers

Animações

Importância das animações• Captura do foco do usuário• Dica do que irá acontecer se o usuário completar uma ação• Relacionamento entre elementos• Distração de operações demoradas em background• Qualidade, detalhamento

Importância de animações

https://dribbble.com/shots/2111739-Pull-To-Refresh

Importância de animações

https://dribbble.com/shots/2393934-iPad-App-Interactions

Xamarin.Forms Animations• Permite mudar propriedades visuais dos elementos• Transforma as propriedades ao longo do tempo• São awaitables• ViewExtensions, Animation e AnimationExtensions

Rotation• Rotaciona o elemento

Scaling• Muda o tamanho do elemento

Translation• Move o elemento

Fading• Muda a opacidade do elemento

ViewExtensions• Pode ser aplicado em qualquer View• TranslateTo (TranslationX e TranslationY)• ScaleTo/RelScaleTo (Scale)• RotateTo/RelRotateTo (Rotation)• RotateXTo/RotateYTo (RotationX, RotationY)• FadeTo (Opacity)• CancelAnimations

Dem

oAnimaçõesXamarin.Forms

Anchor• É o ponto de referência do posicionamento do elemento• Também é usado como ponto de referência para animação• Sua posição é relativa• 0 é o ponto mais à esquerda• 1 é o ponto mais à direita

Anchor

Easing• Torna animações mais realistas• Aplicada durante a animação

Easing• Funções de Easing nativas:• Linear (padrão) • SinIn, SinOut, e SinInOut • CubicIn, CubicOut, e CubicInOut • BounceIn e BounceOut • SpringIn e SpringOut

https://developer.xamarin.com/api/type/Xamarin.Forms.Easing/

Funções de Easing Customizadas

http://easings.net

Dem

oAnimaçõesEasing

Xamarin.Forms x Customização• Mais de 40 controles, páginas e componentes de layouts• Reusabilidade de componentes de interface gráfica• Produtividade• Perfeito para aplicativos com componentes nativos das plataformas

Xamarin.Forms x CustomizaçãoSe eu preciso de componentes customizados, significa que não posso mais usar Xamarin.Forms?

Calma, você pode!

Custom Renderers

Como Xamarin.Forms funciona?• Abstração da interface gráfica• Resolução do componente depende da plataforma em que roda• Os controles do Xamarin.Forms são apenas abstrações em cima de

componentes padrões das plataformas

Implementação• Xamarin.Forms Button• Xamarin.Android ButtonRenderer (Android.Widget.Button)• Xamarin.iOS ButtonRenderer (UIKit.UIButton)

Implementação• ViewRenderer<TView, TNativeView> • TView – Sua view no projeto Xamarin.Forms (PCL)• TNativeView – Sua view no projeto específico da plataforma (iOS, Android

ou UWP)

Implementação• ExportRenderer• Atributo que indica qual será a implementação para a classe declarada no

código compartilhado• Atributo de assembly, deve ser declarado acima do namespace

Implementação• Control• Elemento disponível no ViewRenderer que indica o componente nativo que

será renderizado

• Element• Elemento disponível no ViewRenderer que indica o componente

manipulado pelo Xamarin.Forms no projeto compartilhado

Custom Renderers Properties• É possível definir properties que podem ser bindadas no XAML

declarando BindableProperty na classe do projeto Xamarin Forms• OnElementPropertyChanged do CustomRenderer permite atulizar

as propriedades necessárias sempre que o valor mudar

Dem

oCustom RenderersXamarin.Forms

Links e informações• Documentação sobre Animações• Livro Charles Petzold

w w w. l a m b d a 3 . c o m .b r

Obrigado!

@akamudmahmoud.ali@lambda3.com.br