Animation com Xamarin.Forms e Custom Renderers

442 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
442
No SlideShare
0
A partir de incorporações
0
Número de incorporações
227
Ações
Compartilhamentos
0
Downloads
123
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Animation com Xamarin.Forms e Custom Renderers

  1. 1. ANIMATIONWITH FORMS/CUSTOM RENDERERS Mahmoud Ali – Mobile Developer @Lambda3 @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 eTranslationY) • ScaleTo/RelScaleTo (Scale) • RotateTo/RelRotateTo (Rotation) • RotateXTo/RotateYTo (RotationX, RotationY) • FadeTo (Opacity) • CancelAnimations
  13. 13. DEMO
  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
  20. 20. CUSTOM RENDERERS
  21. 21. 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
  22. 22. IMPLEMENTAÇÃO • Xamarin.Forms Button • Xamarin.Android ButtonRenderer (Android.Widget.Button) • Xamarin.iOS ButtonRenderer (UIKit.UIButton)
  23. 23. 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)
  24. 24. 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
  25. 25. IMPLEMENTAÇÃO • Control • Elemento disponível noViewRenderer que indica o componente nativo que será renderizado • Element • Elemento disponível noViewRenderer que indica o componente manipulado pelo Xamarin.Forms no projeto compartilhado
  26. 26. 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
  27. 27. 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
  28. 28. DEMO
  29. 29. LINKS • https://github.com/akamud/FormsAnimations • https://github.com/akamud/CustomRenderers • Documentação sobre Animações • Livro Charles Petzold
  30. 30. OBRIGADO! @akamud mahmoud.ali@lambda3.com.br

×