4 ms·
JS animations are inherently very fast, most likely because you're running a modern browser. :) The code is basically just computing a 4x4 matrix for each card
by mattdesl 12y ago
JS animations are inherently very fast, most likely because you're running a modern browser. :)
The code is basically just computing a 4x4 matrix for each card per frame built up from some tweened position/rotation/etc. Then it applies the matrix to the element's CSS. The code doesn't look optimized (ie allocates lots of typed arrays) but as the demo proves, its already pretty fast.
- deleted 12y ago[deleted]
- Kiro 12y ago> allocates lots of typed arrays Out of curiosity, can you show an example and how it should be done properly?
- mattdesl 12y agoA better approach is to re-use arrays instead of creating intermediate ones, which is what gl-matrix[1] advocates. Each tween might still need its own matrix instance for start and end points, but at least these are not created per tick. A similar approach is to use a "pool" of arrays[2] which allows you to re-use them without having to manually keep track of the temporary arrays. [1] - https://github.com/toji/gl-matrix https://github.com/toji/gl-matrix [2] - https://github.com/mikolalysenko/typedarray-pool https://github.com/mikolalysenko/typedarray-pool
- deleted 12y ago[deleted]
- yesimahuman 12y agoSimilarly, PhysicsJS employs a "scratchpad" of pre-initialized vectors for fast intermediate computations. That way you aren't constructing new objects, but grabbing a free one, zeroing it, and using it as you would before. Seems quite performant. https://github.com/wellcaffeinated/PhysicsJS/blob/master/src/util/scratchpad.js https://github.com/wellcaffeinated/PhysicsJS/blob/master/src...