Animation com Xamarin.Forms e Custom Renderers
-
Upload
akamud -
Category
Technology
-
view
60 -
download
1
Transcript of Animation com Xamarin.Forms e Custom Renderers
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