O documento discute animações no Xamarin.Forms, destacando a importância delas para melhorar a experiência do usuário e como o framework permite alterar propriedades visuais de elementos ao longo do tempo de forma fácil e performática através de recursos como ViewExtensions, Animation e Easing. Demonstrações mostram exemplos de rotação, escala, translação e opacidade de elementos usando diferentes funções de suavização.

1. w w w . l a m b d a 3 . c o m . b r
Animações com Xamarin.Forms
Mahmoud Ali – Desenvolvedor
@akamud

2. Xamarin.Forms
• Vai além do reaproveitamento de código de UI
• Framework com recursos poderosos
• Animations API

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
• Distração de operações demoradas em background
• Relacionamento entre elementos
• 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 Tasks, e 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. Demo
Animações
Xamarin.Forms

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
Animações
Easing

22. Xamanimation

23. Xamanimation

24. Xamanimation
• Feito pela comunidade (@jsuarezruiz)
• Open source (GitHub)
• Permite declarar animações no XAML
• Algumas novas animações disponíveis
• Storyboard

25. Demo
Xamanimation
♥ XAML ♥

26. Algumas considerações
• Animações podem ser complexas demais
• Programadores != Designers

28. Lottie
• Feito pela equipe do Airbnb
• Open source

29. Lottie
• Utiliza Bodymovin
• Criações feitas no Adobe After Effects

30. Lottie
• Permite animações complexas com pouco código
• Alta performance e alto controle

31. Lottie
• Versões para Web, iOS, Android, Xamarin e Xamarin.Forms

32. Demo
Lottie
Xamarin.Forms e Lottie

33. Links e informações
• Documentação sobre Animações
• Livro Charles Petzold
• Xamanimation
• Lottie
• Lottie Files
• https://github.com/akamud/FormsAnimations

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