animações com xamarin.forms
TRANSCRIPT
w w w . l a m b d a 3 . c o m . b r
Animações com Xamarin.Forms
Mahmoud Ali – Desenvolvedor
@akamud
Xamarin.Forms
• Vai além do reaproveitamento de código de UI
• Framework com recursos poderosos
• Animations API
Animações
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
Importância de animações
https://dribbble.com/shots/2111739-Pull-To-Refresh
Importância de animações
https://dribbble.com/shots/2393934-iPad-App-Interactions
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
Rotation
• Rotaciona o elemento
Scaling
• Muda o tamanho do elemento
Translation
• Move o elemento
Fading
• Muda a opacidade do elemento
ViewExtensions
• Pode ser aplicado em qualquer View• TranslateTo (TranslationX e TranslationY)
• ScaleTo/RelScaleTo (Scale)
• RotateTo/RelRotateTo (Rotation)
• RotateXTo/RotateYTo (RotationX, RotationY)
• FadeTo (Opacity)
• CancelAnimations
Dem
oAnimações
Xamarin.Forms
Dem
oAnimações
Xamarin.Forms
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
Anchor
Easing
• Torna animações mais realistas
• Aplicada durante a animação
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/
Funções de Easing Customizadas
http://easings.net
Dem
oAnimações
Easing
Xamanimation
Xamanimation
Xamanimation
• Feito pela comunidade (@jsuarezruiz)
• Open source (GitHub)
• Permite declarar animações no XAML
• Algumas novas animações disponíveis
• Storyboard
Dem
oXamanimation
♥ XAML ♥
Algumas considerações
• Animações podem ser complexas demais
• Programadores != Designers
Lottie
• Feito pela equipe do Airbnb
• Open source
Lottie
• Utiliza Bodymovin
• Criações feitas no Adobe After Effects
Lottie
• Permite animações complexas com pouco código
• Alta performance e alto controle
Lottie
• Versões para Web, iOS, Android, Xamarin e Xamarin.Forms
Dem
oLottie
Xamarin.Forms e Lottie
Links e informações
• Documentação sobre Animações
• Livro Charles Petzold
• Xamanimation
• Lottie
• Lottie Files
• https://github.com/akamud/FormsAnimations
