How to get 60fps animation in terms of rounding/truncating position/alpha floats

Question

I am wondering what gives the best animation performance running at 60fps with lots of objects. I have seen in a few places such as this that you should round or truncate your values so you don't get 54.2356345234578px, but instead get 54.24px.

animationValue = +animationValue.toFixed(2)

For x, y, alpha, etc. Any float values. I sort of understand why this is, but I am interested to know if there are any ideal heuristics to take into account. For example, maybe rounding .toFixed(2) is not ideal for particle animations. Maybe it is choppy for alpha transitions. Wondering if this has been solved, and what to truncate the values to for performance. Also in terms of calculating velocity or physics stuff, just generally what the scale of rounding/truncation should be so there are no noticeable effects.

Answer 1

There’s no case I can think of where rounding values during an animation is a good idea. Color and opacity already get “rounded” by the display’s color depth (i.e. to one of 256 brightness values), and two decimal places’ worth of rounding will be less than the eye’s temporal JND in most cases; rounding the position of an object while it’s moving can cause it to appear to be speeding up and slowing down as it moves, which is visually jarring.

I suspect the reason the author of the article you linked recommended rounding position values is that if the animation stops on a fractional position the result will be blurry, but that’s a reason to round your positions to the nearest whole pixel after the animation completes, not while it’s ongoing.