search

aterrien / jQuery-Knob

Nice, downward compatible, touchable, jQuery dial
http://anthonyterrien.com/knob/
MIT License
5.03k stars 1.24k forks source link

smooth animation #43

Open klaut opened 12 years ago

klaut commented 12 years ago

Hi!

I am trying to modify the code, so i could use the knob as a circular progress bar. I am struggling a bit with animating the drawing of the arc. Do you have any tips how would I go about it? Should I use the draw hook for that and use setInterval inside that?

thathurtabit commented 12 years ago

I'd love to know how to do this too.

harley commented 12 years ago

you don't need to modify the library. just define a render function in your code that calls itself using setTimeout with some small enough the refresh interval (e.g. every 100ms) until the progress is done? and in the render function call $('.knob').val(current_value).trigger('change') where current_value represents the progress and knob is the class of your knob element; it should update as expected

thathurtabit commented 12 years ago

If anyone else is just looking for an animated Doughnut-style chart, you might find this useful: https://github.com/mtibben/jquery.donutchart/blob/master/jquery.donutchart.js

artboard-studio commented 11 years ago

This is the best solution I have found so far, works perfectly and the value is dynamic too

http://stackoverflow.com/questions/16416379/jquery-knob-animate