Transcript of Desenhando a animação
- 1. DESENHANDO A ANIMAO
- 2. Mateus Pinheiro Designer @ IBM @mateusnroll
- 3. O que animao Para que serve Como fazer 3 assuntos
- 4. ANIMAES Quem so, de onde vem e como se reproduzem
- 5. O QUE ?
- 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. 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. Fenmeno Phi
- 9. Persistncia retiniana
- 10. 1fps
- 11. 5fps
- 12. 10fps
- 13. 20fps
- 14. 100fps
- 15. Percepo de movimento atravs de imagens continuas
- 16. PARA QUE SERVE ?
- 17. Continuidade entre dois momentos Dicas do que est
acontecendo Animao na interface
- 18. Continuidade entre dois momentos Indicar a continuidade
entre dois momentos, para facilitar a assimilao do conceito.
Transitional interfaces by Pasquale DSilva
- 19. Dicas do que est acontecendo Indicar uma mudana na
interface de maneira contnua, afirmando o conceito. Transitional
interfaces by Pasquale DSilva
- 20. E isso funciona mesmo?
- 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. Animao um daqueles detalhes que cria os 10% de diferena
entre o seu aplicativo e o do concorrente.
- 23. Build half a product, not a half-ass product Jason Fried -
Basecamp
- 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. 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. COMO FAZER ?
- 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. Vamos falar de 3 hoje: Anticipation Progresso gradativa
Staging O que importante Slow in-out O porque do Easing
- 29. Tirar o aspecto sbito O usurio consegue entender, passo a
passo, o que est acontecendo Anticipation Progresso gradativa
- 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. Nenhuma ao no mundo linear Aes lineares parecem mecnicas,
encenadas Slow in-out O porque do Easing
- 32. Easing Transitional interfaces by Pasquale DSilva
- 33. Easing Transitional interfaces by Pasquale DSilva
- 34. VAMOS FAZER
- 35. Anticipation Entrar na tela principal sutilmente
- 36. + easing
- 37. Anticipation Mostrar o que est mudando
- 38. + easing
- 39. Staging Movimentao para enfatizar o que importante
- 40. + easing
- 41. Staging Animao para enfatizar o que importante
- 42. + easing
- 43. Legal! Como prototipar?
- 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. 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. Pixate Web ou desktop voc decide Fcil, fcil, fcil. Drag and
drop. Prottipos 100% nativos (parece um app)
- 47. Como implementar?
- 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. UIKit Dynamics Maior controle sobre a animao Animaes mais
complexas Mais difcil
- 50. Sprite Kit Animaes simples (como completar o checkout)
Deixa colocar vdeos como sprites Simples
- 51. Beziers and Shapes Facilmente manipulvel Baixo load de
processamento Designers podem criar usando o Paintcode.app
- 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. Obrigado! :)