28 ms·

I wonder how you could apply something like this to transition animations. The simulated flicker ended up looking much better than the LED flicker. Sometimes I

by dexwiz 11y ago

I wonder how you could apply something like this to transition animations. The simulated flicker ended up looking much better than the LED flicker. Sometimes I see animations in UI. Some look completely natural, and some are horribly jarring. I know there are all sorts of curves that tweening uses to time its path. I wonder if reversed engineered curves would look better.

vvanders 11y ago
It's almost always the case of using linear interpolation(which is what every UX-naive developer reaches for) instead of proper ease-in + ease-out which more appropriately models physical movement. Even very subtle changes in the tangents of the curves can have drastic effects and it's frustrating to see some platforms limit them to a few preset curves.
- 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 ago
    Good 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 ago
      Don'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
deleted 11y ago
[deleted]

by dexwiz 11y ago

vvanders 11y ago

It's almost always the case of using linear interpolation(which is what every UX-naive developer reaches for) instead of proper ease-in + ease-out which more appropriately models physical movement. Even very subtle changes in the tangents of the curves can have drastic effects and it's frustrating to see some platforms limit them to a few preset curves.

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 ago
  Good 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 ago
    Don'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

deleted 11y ago

[deleted]