animation com xamarin.forms e custom renderers
TRANSCRIPT
![Page 1: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/1.jpg)
w w w. l a m b d a 3 . c o m .b r
Animation com Forms/Custom Renderers
Mahmoud Ali – Desenvolvedor@akamud
![Page 2: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/2.jpg)
Xamarin.Forms• Vai além do reaproveitamento de código de UI• Framework com recursos poderosos• Animations API• Custom Renderers
![Page 3: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/3.jpg)
Animações
![Page 4: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/4.jpg)
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
![Page 5: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/5.jpg)
Importância de animações
https://dribbble.com/shots/2111739-Pull-To-Refresh
![Page 6: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/6.jpg)
Importância de animações
https://dribbble.com/shots/2393934-iPad-App-Interactions
![Page 7: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/7.jpg)
Xamarin.Forms Animations• Permite mudar propriedades visuais dos elementos• Transforma as propriedades ao longo do tempo• São awaitables• ViewExtensions, Animation e AnimationExtensions
![Page 8: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/8.jpg)
Rotation• Rotaciona o elemento
![Page 9: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/9.jpg)
Scaling• Muda o tamanho do elemento
![Page 10: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/10.jpg)
Translation• Move o elemento
![Page 11: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/11.jpg)
Fading• Muda a opacidade do elemento
![Page 12: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/12.jpg)
ViewExtensions• Pode ser aplicado em qualquer View• TranslateTo (TranslationX e TranslationY)• ScaleTo/RelScaleTo (Scale)• RotateTo/RelRotateTo (Rotation)• RotateXTo/RotateYTo (RotationX, RotationY)• FadeTo (Opacity)• CancelAnimations
![Page 13: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/13.jpg)
Dem
oAnimaçõesXamarin.Forms
![Page 14: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/14.jpg)
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
![Page 15: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/15.jpg)
Anchor
![Page 16: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/16.jpg)
Easing• Torna animações mais realistas• Aplicada durante a animação
![Page 17: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/17.jpg)
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/
![Page 18: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/18.jpg)
Funções de Easing Customizadas
http://easings.net
![Page 19: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/19.jpg)
Dem
oAnimaçõesEasing
![Page 20: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/20.jpg)
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
![Page 21: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/21.jpg)
Xamarin.Forms x CustomizaçãoSe eu preciso de componentes customizados, significa que não posso mais usar Xamarin.Forms?
![Page 22: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/22.jpg)
Calma, você pode!
![Page 23: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/23.jpg)
Custom Renderers
![Page 24: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/24.jpg)
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
![Page 25: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/25.jpg)
Implementação• Xamarin.Forms Button• Xamarin.Android ButtonRenderer (Android.Widget.Button)• Xamarin.iOS ButtonRenderer (UIKit.UIButton)
![Page 26: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/26.jpg)
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)
![Page 27: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/27.jpg)
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
![Page 28: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/28.jpg)
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
![Page 29: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/29.jpg)
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
![Page 30: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/30.jpg)
Dem
oCustom RenderersXamarin.Forms
![Page 31: Animation com Xamarin.Forms e Custom Renderers](https://reader036.vdocuments.mx/reader036/viewer/2022062522/587123791a28abe4448b598d/html5/thumbnails/31.jpg)
Links e informações• Documentação sobre Animações• Livro Charles Petzold