1. 1. DESENHANDO A ANIMAO
2. 2. Mateus Pinheiro Designer @ IBM @mateusnroll
3. 3. O que animao Para que serve Como fazer 3 assuntos
4. 4. ANIMAES Quem so, de onde vem e como se reproduzem
5. 5. O QUE ?
6. 6. O processo de criar a iluso de movimento e mudana de forma ao mostrar uma sequncia de imagens estticas que diferem minimamente uma da outra.
7. 7. Fenmeno Phi Iluso de tica de perceber continuidade de movimento entre dois objetos separados, quando vistos em rpida sucesso Persistncia retiniana Um resduo da imagem permanece por 1/16 segundos na retina
8. 8. Fenmeno Phi
9. 9. Persistncia retiniana
10. 10. 1fps
11. 11. 5fps
12. 12. 10fps
13. 13. 20fps
14. 14. 100fps
15. 15. Percepo de movimento atravs de imagens continuas
16. 16. PARA QUE SERVE ?
17. 17. Continuidade entre dois momentos Dicas do que est acontecendo Animao na interface
18. 18. Continuidade entre dois momentos Indicar a continuidade entre dois momentos, para facilitar a assimilao do conceito. Transitional interfaces by Pasquale DSilva
19. 19. Dicas do que est acontecendo Indicar uma mudana na interface de maneira contnua, afirmando o conceito. Transitional interfaces by Pasquale DSilva
20. 20. E isso funciona mesmo?
21. 21. Animao leva muito tempo, e ningum liga pra isso! Meu sobrinho falou que depois ele faz rapido, e fica DAORA. Jos, o chato
22. 22. Animao um daqueles detalhes que cria os 10% de diferena entre o seu aplicativo e o do concorrente.
23. 23. Build half a product, not a half-ass product Jason Fried - Basecamp
24. 24. Essa animao poderia vir da outra tela e explodir! Uau! Quero uma animao super delightful e sexy, e um latte, por favor. Joo, o hipster
25. 25. Nem tudo deve ser animado Nem tudo precisa ser um duplo twist carpado O designer tem que fazer a parte dele (uma nota de rodap dizendo Entra da esquerda pra direita no conta) Muita hora nessa calma
26. 26. COMO FAZER ?
27. 27. 12 princpios de animao da Disney Os 12 princpios do Valdisnei Squash and stretch Anticipation Staging Straight Ahead Action and Pose to Pose Follow Through and Overlapping Action Slow In and slow Out Arc Secondary Action Timing Exaggeration Solid drawing Appeal
28. 28. Vamos falar de 3 hoje: Anticipation Progresso gradativa Staging O que importante Slow in-out O porque do Easing
29. 29. Tirar o aspecto sbito O usurio consegue entender, passo a passo, o que est acontecendo Anticipation Progresso gradativa
30. 30. Qual a coisa mais importante no momento? Movimento e ponto de incio/fim propositais, para dar destaque a um determinado elemento. Staging O que importante
31. 31. Nenhuma ao no mundo linear Aes lineares parecem mecnicas, encenadas Slow in-out O porque do Easing
32. 32. Easing Transitional interfaces by Pasquale DSilva
33. 33. Easing Transitional interfaces by Pasquale DSilva
34. 34. VAMOS FAZER
35. 35. Anticipation Entrar na tela principal sutilmente
36. 36. + easing
37. 37. Anticipation Mostrar o que est mudando
38. 38. + easing
39. 39. Staging Movimentao para enfatizar o que importante
40. 40. + easing
41. 41. Staging Animao para enfatizar o que importante
42. 42. + easing
43. 43. Legal! Como prototipar?
44. 44. Origami Programao visual Curva de aprendizado grande Exporta o cdigo da animao para o Facebook POP Pode rodar direto no iPhone / iPad Plugin para exportar assets do Sketch
45. 45. Framer.js Programa-se em Javascript Super fcil, se voc j sabe Javascript (ou Swift) Roda no iOS (pelo Safari) Plugin para gerar a base direto do Sketch
46. 46. Pixate Web ou desktop voc decide Fcil, fcil, fcil. Drag and drop. Prottipos 100% nativos (parece um app)
47. 47. Como implementar?
48. 48. Facebook POP Todas as animaes do Paper Abstrao de animaes baseadas em fsica Fcil e rpido Animaes podem ser exportadas direto do Origami
49. 49. UIKit Dynamics Maior controle sobre a animao Animaes mais complexas Mais difcil
50. 50. Sprite Kit Animaes simples (como completar o checkout) Deixa colocar vdeos como sprites Simples
51. 51. Beziers and Shapes Facilmente manipulvel Baixo load de processamento Designers podem criar usando o Paintcode.app
52. 52. Crditos Stage, Created by Juan Pablo Bravo Dog-park, Created by Iconathon Telescope, Created by Dusan Popovic Magic castle, Created by Heinz Wegener Coffee, Created by Ainsley Wagoner Man, Created by Simon Child Light bulb, Created by Till Teenck Person, Created by Leonardo Schneider Phone, Created by Jaap Knevel Bird-cage, Created by James Keuning Totoro, Created by Nithin Davis Nanthikkara Bird, Created by Bram van Rijen Eye, Created by Andy Santos-Johnson Two-fingers, Created by Till Teenck Pointing-up, Created by Till Teenck Peace, Created by Till Teenck Three-fingers, Created by Till Teenck
53. 53. Obrigado! :)