Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Animation com Xamarin.Forms e Custom Renderers

800 views

Published on

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.

Published in: Technology
  • Be the first to comment

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

×