O documento discute animações e renderizadores personalizados no Xamarin.Forms. As animações permitem alterar propriedades visuais de elementos ao longo do tempo e são importantes para capturar a atenção do usuário e melhorar a qualidade da interface. Renderizadores personalizados permitem customizar a aparência e comportamento de controles nativos nas plataformas.

2. ANIMATIONWITH FORMS/CUSTOM
RENDERERS
Mahmoud Ali – Mobile Developer @Lambda3
@akamud

3. XAMARIN.FORMS
• Vai além do reaproveitamento de código de UI
• Framework com recursos poderosos
• Animations API
• Custom Renderers

4. ANIMAÇÕES

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

6. IMPORTÂNCIA DE ANIMAÇÕES
https://dribbble.com/shots/2111739-Pull-To-Refresh

7. IMPORTÂNCIA DE ANIMAÇÕES
https://dribbble.com/shots/2393934-iPad-App-Interactions

8. XAMARIN.FORMS ANIMATIONS
• Permite mudar propriedades visuais dos elementos
• Transforma as propriedades ao longo do tempo
• São awaitables
• ViewExtensions, Animation e
AnimationExtensions

9. ROTATION
• Rotaciona o elemento

10. SCALING
• Muda o tamanho do elemento

11. TRANSLATION
• Move o elemento

12. FADING
• Muda a opacidade do elemento

13. VIEWEXTENSIONS
• Pode ser aplicado em qualquer View
• TranslateTo (TranslationX eTranslationY)
• ScaleTo/RelScaleTo (Scale)
• RotateTo/RelRotateTo (Rotation)
• RotateXTo/RotateYTo (RotationX, RotationY)
• FadeTo (Opacity)
• CancelAnimations

14. DEMO

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

16. ANCHOR

17. EASING
• Torna animações mais realistas
• Aplicada durante a animação

18. 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/

19. FUNÇÕES DE EASING CUSTOMIZADAS
http://easings.net

20. DEMO

21. CUSTOM RENDERERS

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

23. IMPLEMENTAÇÃO
• Xamarin.Forms Button
• Xamarin.Android ButtonRenderer
(Android.Widget.Button)
• Xamarin.iOS ButtonRenderer (UIKit.UIButton)

24. 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)

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

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

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

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

29. DEMO

30. LINKS
• https://github.com/akamud/FormsAnimations
• https://github.com/akamud/CustomRenderers
• Documentação sobre Animações
• Livro Charles Petzold

31. OBRIGADO!
@akamud
mahmoud.ali@lambda3.com.br