如何使用 jQuery 为圆形统计栏设置动画？答案

【问题标题】：How to animate round stat bar with jQuery?如何使用 jQuery 为圆形统计栏设置动画？
【发布时间】：2012-12-21 06:24:29
【问题描述】：

我正在尝试找到一种在页面加载时使用 jQuery 填充圆形红色统计条的方法。它将以圆形运动开始黑色并填充红色。它与实际数字没有任何关系，数字不会反映它填充的数量。我试图让所有的酒吧都填充到同一点。

这是我正在尝试以圆周运动完成的预览。 - http://www.designfluxx.com/labs/bars/

这是圆形统计圈的图像预览 - http://i.stack.imgur.com/Kh1mL.jpg

【问题讨论】：

试试下面的jsfiddle。这可能会帮助你。 jsfiddle.net/oskar/Aapn8
@Doink - 这看起来像是对我的回答，发布它，你会得到一些支持！

标签： jquery jquery-ui progress-bar loading progress

【解决方案1】：

这是上面 cmets 中给出的答案的修改版本：http://jsfiddle.net/mnbishop017/XJWhW/（原始小提琴：http://jsfiddle.net/oskar/Aapn8/）

这将在网络浏览器中为您提供一个交互式 SVG 文件。您可以修改代码以满足您的需求。

HTML：

<input id="range" type="range" min="0" max="100" />
<canvas id="counter" width="240" height="240"></canvas>

CSS：

body {
    text-align:center;
}
canvas {
    display: block;
}
input {
    width: 200px;
}

JavaScript：

var range = document.id('range');
var bg = document.id('counter');
var ctx = ctx = bg.getContext('2d');
var imd = null;
var circ = Math.PI * 2;
var quart = Math.PI / 2;

ctx.beginPath();
ctx.strokeStyle = '#005075';
ctx.lineCap = 'round';        // can also be 'square'
ctx.closePath();
ctx.fill();
ctx.lineWidth = 10.0;

imd = ctx.getImageData(0, 0, 240, 240);

var draw = function(current) {
    ctx.putImageData(imd, 0, 0);
    ctx.beginPath();
    ctx.arc(120, 120, 70, -(quart), ((circ) * current) - quart, false);
    ctx.stroke();
}

range.addEvents({
    mousemove: function() {
        draw(this.value / 100);
    }
});

var myFx = new Fx({
    duration: 8000,
    transition: 'bounce:out',
    onStep: function(step){
        draw(step / 100);
        range.set('value', step);
    }
});

myFx.set = function(now){
    var ret = Fx.prototype.set.call(this, now);
    this.fireEvent('step', now);
    return ret;
};

myFx.start(0, 100);

【讨论】：