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