Baixar para ler offline
Carregado porakamud
Animações com Xamarin.Forms
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.
![[DevCamp 2014] Melhorando a usabilidade com animações](https://cdn.slidesharecdn.com/ss_thumbnails/ienpoao3qwswsrvv88ym-signature-483704c5d1ba8b9498d30ab31892cb3d410d948410c4c1ecd5c207db5dc0e829-poli-140831034734-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[DevCamp 2014] Melhorando a Usabilidade com Animações](https://cdn.slidesharecdn.com/ss_thumbnails/qsnbxruslw6hoxkvdonq-signature-483704c5d1ba8b9498d30ab31892cb3d410d948410c4c1ecd5c207db5dc0e829-poli-140831035103-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Animações com Xamarin.Forms
- 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émdo reaproveitamento de código de UI • Framework com recursos poderosos • Animations API
- 3.
- 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.
- 6.
- 7. Xamarin.Forms Animations • Permitemudar propriedades visuais dos elementos • Transforma as propriedades ao longo do tempo • São Tasks, e awaitables • ViewExtensions, Animation e AnimationExtensions
- 8. Rotation • Rotaciona oelemento
- 9. Scaling • Muda otamanho do elemento
- 10. Translation • Move oelemento
- 11. Fading • Muda aopacidade do elemento
- 12. ViewExtensions • Pode seraplicado em qualquer View • TranslateTo (TranslationX e TranslationY) • ScaleTo/RelScaleTo (Scale) • RotateTo/RelRotateTo (Rotation) • RotateXTo/RotateYTo (RotationX, RotationY) • FadeTo (Opacity) • CancelAnimations
- 13.
- 14.
- 15. Anchor • É oponto 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.
- 17. Easing • Torna animaçõesmais realistas • Aplicada durante a animação
- 18. Easing • Funções deEasing 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 EasingCustomizadas http://easings.net
- 20.
- 22.
- 23.
- 24. Xamanimation • Feito pelacomunidade (@jsuarezruiz) • Open source (GitHub) • Permite declarar animações no XAML • Algumas novas animações disponíveis • Storyboard
- 25.
- 26. Algumas considerações • Animaçõespodem ser complexas demais • Programadores != Designers
- 28. Lottie • Feito pelaequipe do Airbnb • Open source
- 29. Lottie • Utiliza Bodymovin •Criações feitas no Adobe After Effects
- 30. Lottie • Permite animaçõescomplexas com pouco código • Alta performance e alto controle
- 31. Lottie • Versões paraWeb, iOS, Android, Xamarin e Xamarin.Forms
- 32.
- 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