本教程将指导您如何在使用 jquery-circle-progress 插件时，实现动态更新进度值而避免动画从0开始重置。通过调用插件提供的特定方法 circleProgress(‘value’, newValue)，您可以确保进度条动画平滑地从当前值过渡到新值，从而提供更流畅的用户体验。文章将详细介绍初始化、问题分析及解决方案，并提供完整的代码示例。
1. jquery-circle-progress 插件简介与基本初始化
jquery-circle-progress 是一个轻量级的 jquery 插件，用于创建美观的圆形进度条。它支持多种配置选项，包括大小、颜色、起始角度、填充方式等。
基本 HTML 结构：
要使用该插件，您需要一个容器元素，通常是一个 div，其中包含一个用于绘制进度条的子元素。
React JS
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 库// // $(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. 完整实现示例
下面是将上述解决方案应用到初始代码中的完整示例。
jQuery Circle Progress 动态更新 $(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); }); });React JS
CSS (style.css) 内容与上文相同，请确保将其保存为 style.css 文件或直接嵌入到 标签中。
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) 方法。遵循这一原则，您可以创建出更加流畅、用户体验更佳的圆形进度条动画。
以上就是jQuery Circle Progress 动态更新值不重置动画教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1581891.html
微信扫一扫 
支付宝扫一扫 
