animation com xamarin.forms e custom renderers
TRANSCRIPT
ANIMATION WITH FORMS/CUSTOM RENDERERSMahmoud Ali – Mobile Developer @Lambda3@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
DEMO
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
DEMO
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
CUSTOM RENDERERS EVENTS•Eventos são tratados pelo custom renderer. É necessário disparar um evento caso queiramos tratá-lo na nossa classe compartilhada no projeto PCL do Xamarin.Forms
DEMO
LINKS•https://github.com/akamud/FormsAnimations•https://github.com/akamud/CustomRenderers•Documentação sobre Animações•Livro Charles Petzold
