3 ms·
Sometimes you don't have bezier curves. I found a formulation of ease-in-out that gives developers no excuses. ;) https://medium.com/analytic-animations/ease-i
by SapphireSun 11y ago
Sometimes you don't have bezier curves. I found a formulation of ease-in-out that gives developers no excuses. ;)
https://medium.com/analytic-animations/ease-in-out-the-sigmoid-factory-c5116d8abce9 https://medium.com/analytic-animations/ease-in-out-the-sigmo...
- vvanders 11y agoGood idea, but that exp() function makes my inner perf-nerd twitch a bit. I'm personally a fan of pre-generating a fixed set of points that are linearly interpolated and scaled. It has a few advantages: -Extremely cache friendly, can even be cheaper than computing a spline on a lot of platforms since it's essentially just a look up table. -Your curve doesn't need to fit any specific formula(I.E. you can have a step function as part of it if you want). -You can pull data from design applications to generate the curve allowing non-developers to have control over look-and-feel if you want to get that fancy.
- SapphireSun 11y agoDon't forget, when you use these transitions, that computation is a very small fraction of the animation as it's run once by the CPU. You can think of it as setting a uniform on a shader. The other reason I like using analytic functions is because: 1) You can easily generate a linearly interpolated point set if you want, I've done it for CSS in stylus (for spring animations that can't be represented by a single bezier). 2) With the right formulation, it's very easy to tweak the shape as it is in this case 3) You can analyze the functions easily