Going Raw With Animations - Trilha iOS @ TDC Florianópolis 2017

Knowing what is under your car hood might not help you drive better, but certainly helps you buy the right car. Or build a better one.

Animations are not different, and they do not work the same. Actually, there are many types of animations regarding where things get interpolated, who controls the animation, and most fundamentally: how to create natural-feeling movements, that resemble real life?

In this talk, you will get an overview of animations. But what you will actually learn, has nothing to do with the car itself. Lets take a look at the motor first?

Transcript

1. Ivan Seidel Gomes Going Raw with Animations
2. Ivan Seidel Gomes Robótica FLL, OBR, CBR , RoboCup 4 Competições Mundiais Eletrônica uControlador, Digital, Analógica Simulação Fisica, Controle, UI Machine Learning Going Raw with Animations
3. Ivan Seidel Gomes Robótica FLL, OBR, CBR , RoboCup 4 Competições Mundiais Eletrônica uControlador, Digital, Analógica Simulação Fisica, Controle, UI Machine Learning
4. Ivan Seidel Gomes Robótica FLL, OBR, CBR , RoboCup 4 Competições Mundiais Eletrônica uControlador, Digital, Analógica Simulação Fisica, Controle, UI Machine Learning
5. Ivan Seidel Gomes Robótica FLL, OBR, CBR , RoboCup 4 Competições Mundiais Eletrônica uControlador, Digital, Analógica Simulação Fisica, Controle, UI Machine Learning
6. Robótica FLL, OBR, CBR , RoboCup 4 Competições Mundiais Eletrônica uControlador, Digital, Analógica Simulação Fisica, Controle, UI Machine Learning Ivan Seidel Gomes
7. Robótica FLL, OBR, CBR , RoboCup 4 Competições Mundiais Eletrônica uControlador, Digital, Analógica Simulação Fisica, Controle, UI Machine Learning Ivan Seidel Gomes Conteúdo
8. Robótica FLL, OBR, CBR , RoboCup 4 Competições Mundiais Eletrônica uControlador, Digital, Analógica Simulação Fisica, Controle, UI Machine Learning Conteúdo
9. Conteúdo Transform
10. Transforms
11. Transforms Chwazi 300K Downloads
12. Transforms
13. Transforms
14. Transforms X Y Translation dY dX
15. Transforms Translation dY dX
16. Transforms Translation dY dX
17. Transforms Scale X Scale Y Scale sY sX Translation dY dX
18. Transforms Translation dY dX Scale sY sX
19. Transforms Translation dY dX Scale sY sX Rotation Θ Θ
20. Transforms Translation dY dX Scale sY sX Rotation Θ Point Y X
21. Transforms Translation dY dX Point Y X Scale sY sX Rotation Θ
22. Transforms Translation dY dX Point Y X Scale sY sX Rotation Θ
23. Transforms Translation dY dX Point Y X Scale sY sX Rotation Θ
24. Transforms Translation dY dX Point Y X Scale sY sX Rotation Θ
25. Transforms Translation dY dX Point Y X Scale sY sX Rotation Θ
26. Transforms Translation dY dX Point Y X Scale sY sX Rotation Θ
27. Transforms Translation dY dX Point Y X Scale sY sX Rotation Θ
28. Transforms Point Y X x y p1 =
29. Transforms Point Y X x y p1 = x y z p2 =
30. Transforms Point Y X x y p1 = x y z p2 =
31. Transforms Point Y X x y p1 = x y z p2 = p2 p3 = p1 +
32. Transforms Point Y X x y p1 = x y z p2 = p3 = p1 + 3 1
33. Transforms pt = + Translation dY dX Point Y X p t
34. Transforms 1.0 2.0 pt = 3.0 2.0 + = 4.0 4.0 Translation dY dX Point Y X
35. Transforms 1.0 2.0 ps = = 1.0*1 2.0*1 Point Y X Scale sY sX + 1.0*0 + 1.0*0 1 0 0 1
36. Transforms 1.0 2.0 ps = = 1.0*1 2.0*1 Point Y X Scale sY sX + 1.0*0 + 1.0*0 1 0 0 1
37. Transforms 1.0 2.0 ps = Point Y X Scale sY sX 1 0 0 1 = 1.0*1 2.0*1
38. Transforms 1.0 2.0 ps = Point Y X Scale sY sX 2 0 0 1 = 1.0*2 2.0*1
39. Transforms 1.0 2.0 ps = Point Y X Scale sY sX 2 0 0 3 = 1.0*2 2.0*3
40. Transforms 1.0 2.0 ps = sX 0 0 sY = 1.0*sX 2.0*sY Point Y X Scale sY sX
41. Transforms x y ps = sX 0 0 sY = x*sX y*sY Point Y X Scale sY sX
42. Transforms 1.0 0.0 pr = cosθ -sinθ sinθ cosθ Point Y X Rotation Θ
43. Transforms Point Y X Rotation Θ [1, 0] -1 0 0 -1 1×-1 + 0×0 0×0 + 0×-1 = =
44. Transforms Point Y X Rotation Θ [1, 0] -1 0 0 -1 -1 0 = = [-1, 0]
45. Transforms Point Y X Rotation Θ [1, 1] -1 0 0 -1 -1 -1 = = [-1, -1]
46. Transforms Point Y X Rotation Θ -1 0 0 -1 -1 -1 = =
47. Transforms Point Y X Rotation Θ -1 0 0 -1 -1 -1 = =
48. Transforms -1 0 0 -1 -1 -1 = = Point Y X Rotation Θ
49. Transforms -1 0 0 -1 -1 -1 = = Point Y X Rotation Θ
50. Transforms Translation dY dX Point Y X Scale sY sX Rotation Θ 1 0 0 0 1 0 0 0 1 pX pY 1
51. Transforms 1 0 dX 0 1 dY 0 0 1 pX pY 1 Translation dY dX Point Y X Scale sY sX Rotation Θ
52. Transforms sX 0 0 0 sY 0 0 0 1 pX pY 1 Translation dY dX Point Y X Scale sY sX Rotation Θ
53. Transforms 0 0 0 0 1 pX pY 1 cosΘ cosΘ -cosΘ sinΘ Translation dY dX Point Y X Scale sY sX Rotation Θ
54. Transforms sX 0 dX 0 sY dY 0 0 1 pX pY 1 0 0 0 0 1 cosΘ cosΘ -cosΘ sinΘ Translation dY dX Point Y X Scale sY sX Rotation Θ
55. sX 0 dX 0 sY dY 0 0 1 0 0 cosΘ cos -cosΘ sin … Transforms Translation dY dX Point Y X Scale sY sX Rotation Θ
56. UIView Translation dY dX Point Y X Scale sY sX Rotation Θ Property: UIView.transform
57. UIView Property: UIView.transform Translation dY dX Point Y X Scale sY sX Rotation Θ
58. UIView Translation dY dX Point Y X Scale sY sX Rotation Θ Property: UIView.layer.transform
59. UIView Translation dY dX Point Y X Scale sY sX Rotation Θ Property: UIView.layer.transform
60. UIView Translation dY dX Point Y X Scale sY sX Rotation Θ Property: UIView.layer.transform Demo!
61. UIView Translation dY dX Point Y X Scale sY sX Rotation Θ Property: UIView.layer.transform
62. UIView Translation dY dX Point Y X Scale sY sX Rotation Θ Property: UIView.layer.presentation().transform
63. Translation dY dX Point Y X Scale sY sX Rotation Θ Transforms Z dZ sZ vZ vY vX
64. Translation dY dX Point Y X Scale sY sX Rotation Θ Transforms Z dZ sZ vZ vY vX 1 0 0 0 1 0 0 0 1 pX pY 1
65. Translation dY dX Point Y X Scale sY sX Rotation Θ Transforms Z dZ sZ vZ vY vX 1 0 0 0 1 0 0 0 1 pX pY 0 0 0 0 0 0 1 1 pZ
66. Translation dY dX Point Y X Scale sY sX Rotation Θ Transforms Z dZ sZ vZ vY vX sX 0 0 0 sY 0 0 0 sZ pX pY 0 0 0 dX dY dZ 1 1 pZ
67. Translation dY dX Point Y X Scale sY sX Rotation Θ Transforms Z dZ sZ vZ vY vX 0 0 0 0 1 pX pY 0 0 0 0 0 0 1 1 pZ cosΘ cosΘ -cosΘ sinΘ Eixo Z
68. Translation dY dX Point Y X Scale sY sX Rotation Θ Transforms Z dZ sZ vZ vY vX 0 0 1 0 0 pX pY 0 0 0 0 0 0 1 1 pZ cosΘ cosΘ -cosΘ sinΘ Eixo Y
69. Translation dY dX Point Y X Scale sY sX Rotation Θ Transforms Z dZ sZ vZ vY vX 1 0 0 0 0 pX pY 0 0 0 0 0 0 1 1 pZ cosΘ cosΘ -cosΘ sinΘ Eixo X
70. Translation dY dX Point Y X Scale sY sX Rotation Θ Transforms Z dZ sZ vZ vY vX 1 0 0 0 1 0 0 0 1 pX pY 0 0 0 0 0 0 1 1 pZ
71. Translation dY dX Point Y X Scale sY sX Rotation Θ Transforms Z dZ sZ vZ vY vX 1 0 0 0 1 0 0 0 1 pX pY 0 0 d 0 0 0 1 1 pZ Perspectiva d
72. UIView CALayer
73. UIView CALayer alpha UIView CALayer opacity center position transform transform backgroundColor backgroundColor bounds bounds frame frame
74. UIView CALayer Demo!
75. Renderização Renderização
76. Renderização timing.
77. Renderização 2.208 x 1.242 = ~2.700.000 pixels pixels x 4 bytes = 10.800.000 bytes 50 ciclos x bytes = 540.000.000 ciclos ciclos ÷ 2.4Ghz = ~200 ms
78. Renderização 1/60s
79. Renderização 1/60s
80. Renderização 1/60s
81. Renderização 1/60s
82. DRAW Renderização 1/60s RENDER DISPLAY
83. DRAW Renderização 1/60s RENDER DISPLAY DRAW RENDER DISPLAY
84. DRAW Renderização 1/60s RENDER DISPLAY DRAW RENDER DISPLAY DRAW RENDER DISPLAY
85. Renderização Sprite/SceneKit Metal UIView Core Animation OpenGL ES Core Graphics
86. Ecosistema Metal UIView Core Animation OpenGL ES Core Graphics Sprite/SceneKit
87. Ecosistema Metal UIView Core Animation OpenGL ES Core Graphics Sprite/SceneKit
88. Ecosistema Metal UIView Core Animation OpenGL ES Core Graphics Sprite/SceneKit iOS < 9 GPU
89. Ecosistema Metal UIView Core Animation OpenGL ES Core Graphics Sprite/SceneKit iOS >= 9 GPU
90. Ecosistema Metal UIView Core Animation OpenGL ES Core Graphics Sprite/SceneKit GPU
91. Ecosistema Metal UIView Core Animation OpenGL ES Core Graphics Sprite/SceneKit GPU
92. Ecosistema Metal UIView Core Animation OpenGL ES Core Graphics Sprite/SceneKit GPU
93. OpenGL ES GPU OpenGL
94. OpenGL CPU GPU
95. CPU GPU OpenGL
96. Vertex Buffer OpenGL
97. Vertex Buffer Vertex Indexes 1 2 3 1 3 4 5 6 7 5 7 8 … … … … … … … … … … … … … OpenGL
98. Vertex Buffer Vertex Indexes 1 2 3 1 3 4 5 6 7 5 7 8 … … … … … … … … … … … … … OpenGL
99. Vertex Buffer Vertex Indexes 1 2 3 1 3 4 5 6 7 5 7 8 … … … … … … … … … … … … … OpenGL
100. OpenGL Vertex Shader
101. OpenGL Vertex Shader
102. OpenGL Vertex Shader Fragment Shader
103. OpenGL Vertex Shader Fragment Shader
104. OpenGL Vertex Shader Fragment Shader
105. OpenGL Vertex Shader Fragment Shader
106. OpenGL Vertex Shader Fragment Shader
107. OpenGL Vertex Shader Fragment Shader FrameBuffer
108. OpenGL Vertex Shader Fragment Shader FrameBuffer Geometry Shader
109. OpenGL Vertex Shader Fragment Shader FrameBuffer Geometry Shader
110. OpenGL Vertex Shader Fragment Shader FrameBuffer Geometry Shader
111. OpenGL Vertex Shader Fragment Shader FrameBuffer Geometry Shader
112. OpenGL Vertex Shader Fragment Shader FrameBuffer Geometry Shader Shader Program
113. OpenGL
114. OpenGL
115. OpenGL
116. v OpenGL
117. v Interpolação
118. Interpolação Estado Estado
119. Interpolação Estado Estado 0.0 0.5 1.0 0.75 0.25 Float Color Integer Matrix Vectors Interpoláveis:
120. Interpolação Estado Estado 0.0 0.5 1.0 0.75 0.25 Float Color Integer Matrix Vectors Interpoláveis: * 0.1 + 0.9 * MyFloatA MyFloatB
121. Interpolação Estado Estado 0.0 0.5 1.0 0.75 0.25 Float Color Integer Matrix Vectors Interpoláveis: * 0.1 + 0.9 * [R, G, B] [R, G, B]
122. Interpolação Estado Estado 0.0 0.5 1.0 0.75 0.25 Float Color Integer Matrix Vectors Interpoláveis: 1 0 0 0 1 0 0 0 1 0 0 0 0 0 0 1 1 0 0 0 1 0 0 0 1 0 0 0 0 0 0 1 * 0.1 + 0.9 *
123. Interpolação Estado Estado 0.0 0.5 1.0 0.75 0.25 Float Color Integer Matrix Vectors Interpoláveis: Linear Ease (In/Out) Curvas: Spring Bounce Dinâmica
124. Interpolação Estado Estado 0.0 0.5 1.0 0.75 0.25 CPU Interpolação: GPU Float Color Integer Matrix Vectors Interpoláveis: Linear Ease (In/Out) Curvas: Spring Bounce Dinâmica
125. Interpolação Estado Estado 0.0 0.5 1.0 0.75 0.25
126. Interpolação Estado Estado 0.0 0.5 1.0 0.75 0.25 CPU Interpolação: GPU DisplayLink
127. Interpolação Estado Estado 0.0 0.5 1.0 0.75 0.25 Float Color Integer Matrix Vectors Interpoláveis: Linear Ease (In/Out) Curvas: Spring Bounce Dinâmica CPU Interpolação: GPU Demo!
128. Ivan Seidel Gomes Going Raw with Animations github.com/ivanseidel bit.ly/RAWANIM