20. Fundamental Physical Limitations
Memory
- Can’t store too much stuff
Speed
- Quad-core CPU can do certain operations better
Bandwidth
- Bottleneck can be in the data transfer
53. Principles of Fluid Animation
At the beginning, push as many resources
1 as possible to the GPU
During the animation, minimize
2 CPU-GPU interaction
54. Immediate vs Retained
At the beginning...
draw the shape onto a buffer
For every animation tick...
draw the shape at (x, y) blit the buffer at (x, y)
x = x + 10 x = x + 10
Off main thread
55. Mechanics of Animation
“Hey, this is good stuff. Cache it as texture #42.”
Initialization
“Apply [operation] to texture #42.”
Animation step
58. Compositing By Force
-webkit-transform: translateZ(0)
Not needed for CSS animation!
.someid {
-webkit-animation-name: somekeyframeanimation;
-webkit-animation-duration: 7s;
-webkit-transform: translateZ(0);
}
Don’t do that
59. Debugging in Safari
defaults write com.apple.Safari IncludeInternalDebugMenu 1
63. Color Transition
@-webkit-keyframes box {
0% { -webkit-transform: background-color: blue; }
100% { -webkit-transform: background-color: green; }
}
Need a new texture uploaded to the
GPU for every in-between color
66. Timer Latency
Depending on
user reaction
•Animation end triggers the JavaScript callback
•JavaScript code kicks the next animation
Prepare both animation and
hide the “wrong” one
67. Avoid Overcapacity
Texture upload
.... ....
Think of the GPU memory like a cache.