canvas-gauges icon indicating copy to clipboard operation
canvas-gauges copied to clipboard

Radial needle animation occasionally jumps "back" on Firefox if value updated frequently

Open panuworld opened this issue 3 years ago • 2 comments

Trying achieve smooth needle behavior with animated radial gauge seem to be impossible at least on Firefox 96.0.3 (64-bit). If the gauge value is changed a few times before the previous animation has completed, the needle occasionally "jumps" back to some of the previous values. It looks like that a new animation is started using some old value as the starting value, not the current needle position.

The only workaround I have found out so far is to adjust animationDuration all the time so that previous animation is completed before the next value will be set. However, sometimes it is difficult to estimate when the next value will be assigned, so one has to use very quick animations so that possibility of the next value update before the animation is complete is small.

Keeping animation duration shorter than the value update interval also forces the needle to stop before every update, breaking the smoothness of slowly increasing/decreasing value. I would like to use animation duration slightly longer than the value update interval to keep the needle in motion all the time but that is just not possible with 2.1.7.

panuworld avatar Feb 04 '22 20:02 panuworld

I'm experiencing this on chrome as well

socks415 avatar May 03 '22 15:05 socks415

您的邮件我已收到,谢谢!

TuShen121 avatar May 03 '22 15:05 TuShen121