Transformações de Views
•Download as PPTX, PDF•
3 likes•757 views
InterCon Android 20/09/2014
Recommended
More Related Content
Similar to Transformações de Views
Similar to Transformações de Views (6)
Transformações de Views
- 1. Transformações de Views Inove na interação com o usuário Jonas Alves
- 2. Jonas Alves Android, iOS Java, Objective-C, Ruby +JonasDeFariaAlves @jonas_alves github.com/jonasfa jonasfa@gmail.com
- 3. UI
- 5. Google Talk
- 6. Facebook
- 7. Skype
- 8. Foursquare
- 9. • Java ME • Symbian Antecessores • Windows Mobile 6.5
- 11. Facebook
- 12. Google Talk
- 13. Skype
- 14. Foursquare
- 15. Aparência
- 16. Transições hoje
- 17. Transições amanhã Material Design
- 18. Transições • Presença • Posição • Tamanho • ?
- 19. E agora?
- 20. Transformação
- 21. Clip
- 22. Clip
- 23. Scale
- 24. Rotate
- 25. Translate
- 26. Skew
- 27. Rect to Rect
- 28. Rect to Rect
- 29. Rect to Rect
- 30. Poly to Poly
- 31. O quê fazer com isso?
- 32. Composição
- 33. Interação
- 34. Animação
- 36. View#draw
- 37. Canvas • Texto • Formas geométricas • Imagens • Preenchimentos A
- 38. View#draw
- 41. Passo 1: set valor
- 42. Passo 2: draw • 2.1: fechamento - scale • 2.2: dobras - polyToPoly, clip • 2.3: sombra - drawColor
- 43. Passo 2.1: scale
- 44. Passo 2.1: scale
- 45. Passo 2.2: polyToPoly 0 0.5 1
- 47. Passo 2.2: clip
- 48. Passo 2.2: clip
- 49. Passo 2.2 Para cada pedaço: canvas.save() polyToPoly clip super.draw() canvas.restore()
- 50. Passo 2.2
- 54. Dúvidas +JonasDeFariaAlves @jonas_alves github.com/jonasfa jonasfa@gmail.com ?
Editor's Notes
- 2010 - mobile
- O quê aconteceu O quê está acontecendo O quê pode acontecer
- Quem lembra do Talk?
- Competição != experiência Funcionar bem -> destaque
- Plataformas feitas p/ aparelhos Menos recursos Não focava o consumidor
- Foco conteúdo Tendências design
- usam recursos experiência rica
- Funcionar não é suficiente loja -> primeira impressão -> download
- Funcionar não é suficiente loja -> primeira impressão -> download
- Salto Arcaico -> tomou forma e detalhes Recursos e competição
- Tela nova SUBSTITUI a antiga desde sempre animação até mudou… mas ainda substitui
- Material design Movimento, transição são elementos que entram e saem, não telas inteiras
- Suave
- transições forem comuns ir além completar transições, UX
- além de presença/posição, mudar forma do elemento Framework suporta os tipos: ->
- só parte que quer
- não afeta layout
- 3 eixos
- deslocar
- distorce -> mesmo conteúdo nos dois Rects
- distorce -> mesmo conteúdo nos dois Rects
- distorce -> mesmo conteúdo nos dois Rects
- Sozinhos = meh
- + transformações partes separadas
- Vida à transformação Responder à interação do usuário com transformação
- Animações simples conjunto / Transições
- Melhor parte! Como se transforma views
- 1º onde: no #draw onDraw :( background, subviews - SLIDE > como: Canvas = “quadro em branco”
- Onde as Views fazem seus desenhos Parece pouco
- ponto central: definir transform. canvas antes exemplo rotate Salvar e restaurar Mesmo canvas todas views
- 2 exemplos: código disponível vamos ver como fazer composição com interação
- simplificar
- 1º: vale p/ interação e animação setter: estágio da transform, entre início e fim animação ou interação (pinça, scroll) invalidate() -> ultimo desenho é velho
- dobra cavidade
- largura/altura, ponto pivô (gravidade, direção)
- cavidade
- metade cima: OK metade baixo: não queremos
- parte visível
- pra cada pedaço polyToPoly é sobrescrito, clip não
- transforma e desenha 1x pra cada pedaço
- também queremos a sombra transformada
- exemplo simples melhoria: mais dobras, degradé, etc
- falar dos dois GitHub