Animation com Xamarin.Forms e Custom Renderers

54 visualizações

Publicada em

O Xamarin.Forms traz muito mais do que apenas abstração de interface gráfica. Aqui abordaremos a API de animação do Forms que facilita a criação de animações que podem enriquecer a experiência do usuário no seu aplicativo. Além disso, veremos como contornar as limitações impostas pelo Xamarin.Forms utilizando Custom Renderers.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
54
No SlideShare
0
A partir de incorporações
0
Número de incorporações
5
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Animation com Xamarin.Forms e Custom Renderers

  1. 1. w w w . l a m b d a 3 . c o m . b r Animation com Forms/Custom Renderers Mahmoud Ali – Desenvolvedor @akamud
  2. 2. Xamarin.Forms • Vai além do reaproveitamento de código de UI • Framework com recursos poderosos • Animations API • Custom Renderers
  3. 3. Animações
  4. 4. 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
  5. 5. Importância de animações https://dribbble.com/shots/2111739-Pull-To-Refresh
  6. 6. Importância de animações https://dribbble.com/shots/2393934-iPad-App-Interactions
  7. 7. Xamarin.Forms Animations • Permite mudar propriedades visuais dos elementos • Transforma as propriedades ao longo do tempo • São awaitables • ViewExtensions, Animation e AnimationExtensions
  8. 8. Rotation • Rotaciona o elemento
  9. 9. Scaling • Muda o tamanho do elemento
  10. 10. Translation • Move o elemento
  11. 11. Fading • Muda a opacidade do elemento
  12. 12. ViewExtensions • Pode ser aplicado em qualquer View • TranslateTo (TranslationX e TranslationY) • ScaleTo/RelScaleTo (Scale) • RotateTo/RelRotateTo (Rotation) • RotateXTo/RotateYTo (RotationX, RotationY) • FadeTo (Opacity) • CancelAnimations
  13. 13. Demo Animações Xamarin.Forms
  14. 14. 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
  15. 15. Anchor
  16. 16. Easing • Torna animações mais realistas • Aplicada durante a animação
  17. 17. 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/
  18. 18. Funções de Easing Customizadas http://easings.net
  19. 19. Demo Animações Easing
  20. 20. 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
  21. 21. Xamarin.Forms x Customização Se eu preciso de componentes customizados, significa que não posso mais usar Xamarin.Forms?
  22. 22. Calma, você pode!
  23. 23. Custom Renderers
  24. 24. 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
  25. 25. Implementação • Xamarin.Forms Button • Xamarin.Android ButtonRenderer (Android.Widget.Button) • Xamarin.iOS ButtonRenderer (UIKit.UIButton)
  26. 26. 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)
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. Demo Custom Renderers Xamarin.Forms
  31. 31. Links e informações • Documentação sobre Animações • Livro Charles Petzold
  32. 32. w w w . l a m b d a 3 . c o m . b r Obrigado! @akamud mahmoud.ali@lambda3.com.br

×