Porque criar animações customizadas no seu app, quais o benefícios do custo de implementação, como portotipar e testar em algumas horas e algumas ideias de como transformar isso em código.

1. DESENHANDO A
ANIMAÇÃO

2. Mateus Pinheiro
Designer @ IBM
@mateusnroll

3. • O que é animação
• Para que serve
• Como fazer
3 assuntos

4. ANIMAÇÕES
Quem são,
de onde vem
e como se reproduzem

5. O QUE É ?

6. O processo de criar a ilusão de
movimento e mudança de forma ao
mostrar uma sequência de imagens
estáticas que diferem minimamente
uma da outra.

7. Fenômeno Phi
Ilusão de ótica de perceber
continuidade de movimento entre
dois objetos separados, quando
vistos em rápida sucessão
Persistência retiniana
Um resíduo da imagem permanece
por 1/16 segundos na retina

8. Fenômeno Phi

9. Persistência retiniana

10. 1fps

11. 5fps

12. 10fps

13. 20fps

14. 100fps

15. Percepção de movimento através
de imagens continuas

16. PARA QUE SERVE ?

17. • Continuidade entre dois momentos
• Dicas do que está acontecendo
Animação na interface

18. Continuidade entre dois momentos
Indicar a continuidade entre dois momentos, para
facilitar a assimilação do conceito.
Transitional interfaces by Pasquale D’Silva

19. Dicas do que está acontecendo
Indicar uma mudança na interface de maneira
contínua, afirmando o conceito.
Transitional interfaces by Pasquale D’Silva

20. E isso funciona
mesmo?

21. Animação leva muito tempo, e
ninguém liga pra isso!
Meu sobrinho falou que depois ele
faz rapidão, e fica DAORA.
José, o chato

22. Animação é um daqueles detalhes que cria os
10% de diferença
entre o seu aplicativo e o do concorrente.

23. Build half a product,
not a half-ass product
Jason Fried - Basecamp

24. Essa animação poderia vir da outra
tela e explodir! Uau!
Quero uma animação super delightful
e sexy, e um latte, por favor.
João, 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” não conta)
Muita hora nessa calma

26. COMO FAZER ?

27. 12 princípios de animação da Disney
Os 12 princípios 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
Progressão gradativa
Staging
O que é importante
Slow in-out
O porque do Easing

29. • Tirar o aspecto súbito
• O usuário consegue entender, passo a passo, o
que está acontecendo
Anticipation
Progressão gradativa

33. • Qual é a coisa mais importante no momento?
• Movimento e ponto de início/fim propositais, para
dar destaque a um determinado elemento.
Staging
O que é importante

37. • Nenhuma ação no mundo é linear
• Ações lineares parecem mecânicas, encenadas
Slow in-out
O porque do Easing

38. Easing
Transitional interfaces by Pasquale D’Silva

39. Easing
Transitional interfaces by Pasquale D’Silva

44. VAMOS FAZER

49. Anticipation
• Entrar na tela principal sutilmente

50. + easing

51. Anticipation
• Mostrar o que está mudando

52. + easing

53. Staging
• Movimentação para enfatizar o que é
importante

54. + easing

55. Staging
• Animação para enfatizar o que é
importante

56. + easing

57. • Legal! Como prototipar?

58. • Origami
• Programação visual
• Curva de aprendizado grande
• Exporta o código da animação para o
Facebook POP
• Pode rodar direto no iPhone / iPad
• Plugin para exportar assets do Sketch

59. • Framer.js
• Programa-se em Javascript
• Super fácil, se você já sabe Javascript (ou
Swift)
• Roda no iOS (pelo Safari)
• Plugin para gerar a base direto do Sketch

60. • Pixate
• Web ou desktop – você decide
• Fácil, fácil, fácil. Drag and drop.
• Protótipos 100% nativos (parece um app)

61. • Como implementar?

62. • Facebook POP
• Todas as animações do Paper
• Abstração de animações baseadas em física
• Fácil e rápido
• Animações podem ser exportadas direto do
Origami

63. • UIKit Dynamics
• Maior controle sobre a animação
• Animações mais complexas
• Mais difícil

64. • Sprite Kit
• Animações simples (como completar o
checkout)
• Deixa colocar vídeos como sprites
• Simples

65. • Beziers and Shapes
• Facilmente manipulável
• Baixo load de processamento
• Designers podem criar usando o Paintcode.app

66. Créditos
• 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

67. • Obrigado! :)