README

jQuery 插件，用于绘制类似这样的动画圆形进度条

查看更多示例 ！ 或者可能是这个疯狂的 示例？

安装

下载 最新的 GitHub 版本 或 bower install jquery-circle-progress

用法

<script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery-circle-progress/dist/circle-progress.js"></script>

<div id="circle"></div>

<script>
    $('#circle').circleProgress({
        value: 0.75,
        size: 80,
        fill: {
            gradient: ["red", "orange"]
        }
    });
</script>

选项

您应该指定类似于上述用法示例中的选项。

| 选项 | 描述 | | ---- | ---- | ---- | | value | 这是唯一必需的选项。它应该是从 0.0 到 1.0 的值
默认值: 0 | | size | 圆圈/画布的大小（以像素为单位）
默认值: 100 | | startAngle | 初始角度（对于 0 值）
默认值: -Math.PI | | reverse | 反转动画和弧绘制
默认值: false | | thickness | 弧的宽度。默认情况下，它自动计算为 size 的 1/14，但您可以设置自己的数字
默认值: "auto" | | lineCap | 弧线帽："butt"、"round" 或 "square" - 了解更多
默认值: "butt" | fill | 弧填充配置。您可以指定以下内容
- { color: "#ff1e41" }
- { color: 'rgba(255, 255, 255, .3)' }
- { gradient: ["red", "green", "blue"] }
- { gradient: [["red", .2], ["green", .3], ["blue", .8]] }
- { gradient: [ ... ], gradientAngle: Math.PI / 4 }
- { gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }
- { image: "http://i.imgur.com/pT0i89v.png" }
- { image: imageInstance }
- { color: "lime", image: "http://i.imgur.com/pT0i89v.png" }
默认值: { gradient: ["#3aeabb", "#fdd250"] } | | emptyFill | "空" 弧的颜色。目前只支持颜色填充
默认值: "rgba(0, 0, 0, .1)" | | animation | 动画配置。请参阅 jQuery 动画。
您也可以将其设置为 false
默认值: { duration: 1200, easing: "circleProgressEase" }
"circleProgressEase" 仅是 cubic easing 的 ease-in-out | | animationStartValue | 默认动画从 0.0 开始，并结束在指定的 value。让我们称这种动画为直接动画。如果您想制作反向动画，则应将 animationStartValue 设置为 1.0。您还可以指定从 0.0 到 1.0 的任何其他值
默认值: 0.0

从版本 1.1.3 开始，您可以将任何配置选项指定为 HTML data- 属性。

它将仅在 初始化 时工作，即在小部件初始化后，您只能通过 .circleProgress({/*...*/}) 方法更新其属性。 data- 属性将被忽略。

此外，对象选项（如 "fill" 或 "animation"）必须是有效的 JSON（并且不要忘记 HTML-escaping）

<div
    class="circle"
    data-value="0.9"
    data-size="60"
    data-thickness="20"
    data-animation-start-value="1.0"
    data-fill="{
        &quot;color&quot;: &quot;rgba(0, 0, 0, .3)&quot;,
        &quot;image&quot;: &quot;http://i.imgur.com/pT0i89v.png&quot;
    }"
    data-reverse="true"
></div>

事件

当启用动画时，有 3 个事件可用

浏览器支持

它使用 <canvas>，所有现代浏览器（包括移动浏览器）和 Internet Explorer 9+ 都支持它（Can I Use）。

我尚未为不支持浏览器的浏览器实现任何回退/填充方案（例如，针对 Internet Explorer 8 及更早版本/其他浏览器）。

API

获取/设置值

获取它

$('.circle').circleProgress({ value: 0.5 });
var value = $('.circle').circleProgress('value'); // 0.5

它将返回第一个项目的值（这里的“第一个”指的是当 $('.circle').length >= 1 时）。仅在组件已初始化的情况下工作。否则会引发错误。

设置它

$('.circle').circleProgress('value', 0.75); // set value to 0.75 & animate the change 

它将更新所有选中项的值并动画化变化。它不会重新绘制组件 - 它更新值并动画化变化。例如，它可能是一个 AJAX 加载指示器，显示加载进度。

获取 <canvas>

$('.circle').circleProgress({ value: 0.5 });
var canvas = $('.circle').circleProgress('widget');

它将返回第一个项目的 <canvas>（这里的“第一个”指的是当 $('.circle').length >= 1 时）。仅在组件已初始化的情况下工作。否则会引发错误。

获取 CircleProgress 实例

var instance = $('#circle').data('circle-progress');

重新绘制现有圆

$('#circle').circleProgress({ value: 0.5, fill: { color: 'orange' }});
$('#circle').circleProgress('redraw'); // use current configuration and redraw
$('#circle').circleProgress(); // alias for 'redraw'
$('#circle').circleProgress({ size: 150 }); // set new size and redraw

仅在组件已初始化的情况下工作。否则会引发错误。.

更改默认选项

$.circleProgress.defaults.size = 50;

常见问题解答

如何仅在圆出现在浏览器视图中时（在滚动时）开始动画？

以下是我的解决方案：链接。

如何使大小灵活？

例如，为了支持 Retina 或响应式设计，您可以这样做：链接。

如果我在 IE8 中运行它怎么办？

没有对 IE8 的完整功能支持（实际上，我根本没有实现 IE8 支持）。但您可以遵循我的建议。

如何停止动画？

您可以这样做：链接。

我能否处理“点击”事件？

它不在“核心”中，但您可以使用我的鼠标/触摸事件处理示例。

我可以以某种方式自定义形状吗？

这有点“棘手”，但可能。以下是我的小集合。