O documento discute animações e custom renderers no Xamarin.Forms, destacando a importância das animações para melhorar a experiência do usuário e como custom renderers permitem estender os controles padrão do Xamarin.Forms para adicionar funcionalidades customizadas nas plataformas nativas.

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. Xamarin.Forms
• Vai além do reaproveitamento de código de UI
• Framework com recursos poderosos
• Animations API
• Custom Renderers

3. Animações

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. Importância de animações
https://dribbble.com/shots/2111739-Pull-To-Refresh

6. Importância de animações
https://dribbble.com/shots/2393934-iPad-App-Interactions

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. Rotation
• Rotaciona o elemento

9. Scaling
• Muda o tamanho do elemento

10. Translation
• Move o elemento

11. Fading
• Muda a opacidade do elemento

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. Demo
Animações
Xamarin.Forms

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. Anchor

16. Easing
• Torna animações mais realistas
• Aplicada durante a animação

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. Funções de Easing Customizadas
http://easings.net

19. Demo
Animações
Easing

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. Xamarin.Forms x Customização
Se eu preciso de componentes customizados, significa que não
posso mais usar Xamarin.Forms?

22. Calma, você pode!

23. Custom Renderers

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. Implementação
• Xamarin.Forms Button
• Xamarin.Android ButtonRenderer (Android.Widget.Button)
• Xamarin.iOS ButtonRenderer (UIKit.UIButton)

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. 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. 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. 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. Demo
Custom Renderers
Xamarin.Forms

31. Links e informações
• Documentação sobre Animações
• Livro Charles Petzold

32. w w w . l a m b d a 3 . c o m . b r
Obrigado!
@akamud
mahmoud.ali@lambda3.com.br