Animation com Xamarin.Forms e Custom Renderers
Transferir como PPTX, PDF0 gostou352 visualizações
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.
Animation com Xamarin.Forms e Custom Renderers
- 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
- 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
- 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
- 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?
- 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
- 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