1. jquery-circle-progress 插件简介与基本初始化
jquery-circle-progress 是一个轻量级的 jquery 插件，用于创建美观的圆形进度条。它支持多种配置选项，包括大小、颜色、起始角度、填充方式等。
基本 HTML 结构：
要使用该插件，您需要一个容器元素，通常是一个 div，其中包含一个用于绘制进度条的子元素。
<div class="wrapper">
<div class="card react">
<div class="circle">
<div class="bar"></div> <!-- 进度条绘制区域 -->
<div class="box"><span></span></div> <!-- 显示百分比的区域 -->
</div>
<div class="text">React JS</div>
</div>
</div>
<button id="add">Add</button>CSS 样式：
为了使进度条居中并具有基本外观，我们需要一些 CSS 样式。这里提供一个示例，您可以根据项目需求进行调整。
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
background: -webkit-linear-gradient(left, #53c68a, #8b67c4);
}
.wrapper{
width: 1000px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.wrapper .card{
background: #fff;
width: calc(25% - 8px);
height: 300px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper .card .circle{
position: relative;
height: 150px;
width: 150px;
border-radius: 50%;
cursor: default;
}
.card .circle .box,
.card .circle .box span{
position: absolute;
top: 50%;
left: 50%;
}
.card .circle .box{
height: 100%;
width: 100%;
background: #fff;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0.8);
transition: all 0.2s;
}
.card .circle:hover .box{
transform: translate(-50%, -50%) scale(0.91);
}
.card .circle .box span,
.wrapper .card .text{
background: -webkit-linear-gradient(left, #a445b2, #fa4299);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.circle .box span{
font-size: 38px;
font-family: sans-serif;
font-weight: 600;
transform: translate(-45%, -45%);
transition: all 0.1s;
}
.card .circle:hover .box span{
transform: translate(-45%, -45%) scale(1.09);
}
.card .text{
font-size: 20px;
font-weight: 600;
}
@media(max-width: 753px){
.wrapper{
max-width: 700px;
}
.wrapper .card{
width: calc(50% - 20px);
margin-bottom: 20px;
}
}
@media(max-width: 505px){
.wrapper{
max-width: 500px;
}
.wrapper .card{
width: 100%;
}
}JavaScript 初始化：
在页面加载完成后，通过 jQuery 选择器选中目标元素并调用 circleProgress() 方法进行初始化。
// 引入 jQuery 和 circle-progress 库
// <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
// <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
$(document).ready(function() {
let options = {
startAngle: -1.55, // 起始角度
size: 150, // 尺寸
value: 0.85, // 初始值 (0到1之间)
fill: {gradient: ['#a445b2', '#fa4299']} // 填充颜色渐变
};
// 初始化第一个进度条（示例中未直接使用，但展示了完整配置）
$(".circle .bar").circleProgress(options).on('circle-animation-progress',
function(event, progress, stepValue){
// 动画进行中更新百分比文本
let precision = 1; // 小数点后位数
let num = (stepValue * 100).toFixed(precision);
$(this).parent().find("span").text(String(num) + "%");
});
// 初始化需要动态更新的进度条
$(".react .bar").circleProgress({
value: 0.60 // 初始值
});
});2. 问题分析：动态更新时动画重置
在使用 jquery-circle-progress 插件时，一个常见的需求是动态地更新进度条的值。然而，如果直接使用初始化时传递配置对象的方式来更新值，即：
$('#add').on('click', function(){
$(".react .bar").circleProgress({
value: 0.80 // 尝试更新值
});
});您会发现，每次点击按钮更新值时，进度条的动画都会从0开始重新绘制，而不是从当前值平滑过渡到新值。这是因为当您再次传入一个配置对象时，插件会将其视为一次新的初始化请求，从而导致动画行为被重置。
3. 解决方案：使用插件的 value 方法进行平滑更新
jquery-circle-progress 插件提供了一个专门用于动态更新值的公共方法。要实现从当前值到新值的平滑动画过渡，您应该使用以下语法：
$(".selector").circleProgress('value', newValue);其中：
- $(".selector") 是您要更新的进度条元素。
- 'value' 是一个字符串，指示您要操作的属性。
- newValue 是一个介于 0 和 1 之间的浮点数，代表新的进度值。
这种方法调用会告诉插件，您希望更新现有实例的 value 属性，而不是重新初始化整个组件。插件会智能地计算当前值和新值之间的差异，并平滑地执行动画。
4. 完整实现示例
下面是将上述解决方案应用到初始代码中的完整示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Circle Progress 动态更新</title>
<link rel="stylesheet" href="style.css"> <!-- 假设您的CSS文件名为style.css -->
</head>
<body>
<div class="wrapper">
<div class="card react">
<div class="circle">
<div class="bar"></div>
<div class="box"><span></span></div>
</div>
<div class="text">React JS</div>
</div>
</div>
<button id="add">更新进度</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
<script>
$(document).ready(function() {
// 初始化需要动态更新的进度条
// 注意：这里我们只初始化一次，并设置初始值
$(".react .bar").circleProgress({
startAngle: -1.55,
size: 150,
value: 0.60, // 初始值
fill: {gradient: ['#a445b2', '#fa4299']}
}).on('circle-animation-progress',
function(event, progress, stepValue){
// 动画进行中更新百分比文本
let precision = 1; // 小数点后位数
let num = (stepValue * 100).toFixed(precision);
$(this).parent().find("span").text(String(num) + "%");
});
// 按钮点击事件，使用 'value' 方法更新进度
$('#add').on('click', function(){
// 假设我们想更新到0.802
$(".react .bar").circleProgress('value', 0.802);
});
});
</script>
</body>
</html>CSS (style.css) 内容与上文相同，请确保将其保存为 style.css 文件或直接嵌入到 <style> 标签中。
5. 注意事项与最佳实践
- value 范围： 传递给 circleProgress('value', newValue) 的 newValue 必须是一个介于 0 和 1 之间的浮点数。例如，50% 应该表示为 0.5。
- 文本显示精度： 在 circle-animation-progress 事件中，stepValue 也是一个 0 到 1 之间的值。为了显示正确的百分比，需要将其乘以 100，并使用 toFixed() 方法控制小数位数。例如 (stepValue * 100).toFixed(1) 将显示一位小数。
- 首次初始化： 确保在第一次创建进度条时，使用配置对象 (.circleProgress({ ... })) 进行初始化。后续的动态更新才使用 ('value', newValue) 方法。
- 查阅文档： 遇到更复杂的需求时，请务必查阅 jquery-circle-progress 的官方文档，了解所有可用的配置选项和方法。
总结
通过本教程，您已经掌握了 jquery-circle-progress 插件在动态更新进度值时避免动画重置的关键技巧。核心在于区分初始化和更新操作：初始化时使用配置对象 circleProgress({ options })，而后续更新则应使用 circleProgress('value', newValue) 方法。遵循这一原则，您可以创建出更加流畅、用户体验更佳的圆形进度条动画。
