Baixar para ler offline
Carregado porJonas Alves
Transformações de Views
O documento discute transformações de views em interfaces do usuário móveis. Apresenta exemplos de como interfaces mudaram ao longo do tempo e introduz conceitos como clip, scale, rotate e translate. Explica como usar o Canvas e métodos como draw(), polyToPoly() e clip() para compor animações e interações complexas através de transformações visuais de views.
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.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9. • Java ME • Symbian Antecessores • Windows Mobile 6.5
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18. Transições • Presença • Posição • Tamanho • ?
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31. O quê fazercom isso?
- 32.
- 33.
- 34.
- 35.
- 36.
- 37. Canvas • Texto • Formas geométricas • Imagens • Preenchimentos A
- 38.
- 39.
- 40.
- 41. Passo 1: setvalor
- 42. Passo 2: draw • 2.1: fechamento - scale • 2.2: dobras - polyToPoly, clip • 2.3: sombra - drawColor
- 43.
- 44.
- 45. Passo 2.2: polyToPoly 0 0.5 1
- 46.
- 47.
- 48.
- 49. Passo 2.2 Paracada pedaço: canvas.save() polyToPoly clip super.draw() canvas.restore()
- 50.
- 51.
- 52.
- 53.
- 54. Dúvidas +JonasDeFariaAlves @jonas_alves github.com/jonasfa jonasfa@gmail.com ?
Notas do Editor
- #3 2010 - mobile
- #4 O quê aconteceu O quê está acontecendo O quê pode acontecer
- #5 Quem lembra do Talk?
- #8 Competição != experiência Funcionar bem -> destaque
- #10 Plataformas feitas p/ aparelhos Menos recursos Não focava o consumidor
- #12 Foco conteúdo Tendências design
- #13 usam recursos experiência rica
- #14 Funcionar não é suficiente loja -> primeira impressão -> download
- #15 Funcionar não é suficiente loja -> primeira impressão -> download
- #16 Salto Arcaico -> tomou forma e detalhes Recursos e competição
- #17 Tela nova SUBSTITUI a antiga desde sempre animação até mudou… mas ainda substitui
- #18 Material design Movimento, transição são elementos que entram e saem, não telas inteiras
- #19 Suave
- #20 transições forem comuns ir além completar transições, UX
- #21 além de presença/posição, mudar forma do elemento Framework suporta os tipos: ->
- #23 só parte que quer
- #24 não afeta layout
- #25 3 eixos
- #26 deslocar
- #28 distorce -> mesmo conteúdo nos dois Rects
- #29 distorce -> mesmo conteúdo nos dois Rects
- #30 distorce -> mesmo conteúdo nos dois Rects
- #32 Sozinhos = meh
- #33 + transformações partes separadas
- #34 Vida à transformação Responder à interação do usuário com transformação
- #35 Animações simples conjunto / Transições
- #36 Melhor parte! Como se transforma views
- #37 1º onde: no #draw onDraw :( background, subviews - SLIDE > como: Canvas = “quadro em branco”
- #38 Onde as Views fazem seus desenhos Parece pouco
- #39 ponto central: definir transform. canvas antes exemplo rotate Salvar e restaurar Mesmo canvas todas views
- #40 2 exemplos: código disponível vamos ver como fazer composição com interação
- #41 simplificar
- #42 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
- #43 dobra cavidade
- #44 largura/altura, ponto pivô (gravidade, direção)
- #46 cavidade
- #47 metade cima: OK metade baixo: não queremos
- #48 parte visível
- #50 pra cada pedaço polyToPoly é sobrescrito, clip não
- #51 transforma e desenha 1x pra cada pedaço
- #52 também queremos a sombra transformada
- #53 exemplo simples melhoria: mais dobras, degradé, etc
- #54 falar dos dois GitHub