优化 jQuery Circle Progress：实现值更新时动画平滑过渡-html教程-PHP中文网

优化 jQuery Circle Progress：实现值更新时动画平滑过渡

本文详细介绍了在使用 jquery-circle-progress 插件时，如何解决更新进度值导致动画从零重置的问题。通过调用插件提供的 circleProgress('value', newValue) 方法，可以实现动画从当前值平滑过渡到新值，从而提供更流畅的用户体验。教程包含了示例代码和关键注意事项，帮助开发者有效管理动态进度条的动画行为。

引言：jquery-circle-progress 动态更新的挑战

jquery-circle-progress 是一款轻量级且功能强大的 jquery 插件，用于创建美观的圆形进度条。它广泛应用于仪表盘、数据可视化和用户界面中，以直观地展示任务进度、百分比或评分。然而，在实际开发中，当需要动态更新进度条的值时，开发者常会遇到一个问题：动画不是从当前进度继续，而是每次都从0开始重绘，这会破坏用户体验的连贯性。

问题重现：动画重置的默认行为

通常，我们初始化或更新 jquery-circle-progress 插件时，会向其传入一个配置对象，其中包含 value 属性来设置进度值。例如，以下代码片段展示了这种常见的用法：

// 初始设置进度条
$(".react .bar").circleProgress({
  value: 0.60,
  // 其他配置...
});

// 点击按钮更新进度值
$('#add').on('click', function(){
  // 此时动画会从0开始，而不是从0.60继续到0.80
  $(".react .bar").circleProgress({
    value: 0.80
  });
});

登录后复制

在这种模式下，每次调用 circleProgress 并传入完整的配置对象时，插件会将其视为一次全新的初始化或重置操作。这意味着即使 value 属性是唯一改变的选项，动画也会从进度条的起始点（通常是0）开始，然后绘制到新的目标值。这显然不是我们期望的平滑过渡效果。

解决方案：利用 value 方法实现平滑过渡

为了解决动画重置的问题，jquery-circle-progress 插件提供了一种专门的方法来动态更新进度值，同时保持动画的连续性。这个核心方法就是 circleProgress('value', newValue)。

当使用 circleProgress('value', newValue) 这种签名调用插件时，它会智能地识别这是一个值更新操作。插件内部会计算当前进度值与 newValue 之间的差异，并执行一个从当前值到新值的平滑动画过渡，而不是从0开始。这种机制确保了用户界面在数据更新时依然保持流畅和专业。

来画数字人直播

来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。

查看详情

完整示例：实现平滑的进度更新

下面是一个完整的示例，演示如何使用 circleProgress('value', newValue) 方法来实现圆形进度条的平滑动画更新。

HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Circle Progress 平滑更新示例</title>
    <!-- 引入必要的 CSS 样式 -->
    <link rel="stylesheet" href="style.css">
    <!-- 引入 jQuery 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- 引入 jquery-circle-progress 插件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
</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="script.js"></script>
</body>
</html>

登录后复制

CSS 样式 (style.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;
  flex-direction: column; /* 调整为列布局，使按钮在进度条下方 */
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
  background: -webkit-linear-gradient(left, #53c68a, #8b67c4);
}
.wrapper{
  width: 100%; /* 调整宽度，确保居中 */
  max-width: 1000px; /* 最大宽度 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; /* 居中卡片 */
  margin-bottom: 20px; /* 与按钮的间距 */
}
.wrapper .card{
  background: #fff;
  width: 250px; /* 固定卡片宽度，或根据需要调整 */
  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;
}

/* 按钮样式 */
#add {
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(to right, #a445b2, #fa4299);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}
#add:hover {
    background: linear-gradient(to right, #fa4299, #a445b2);
}

/* 响应式调整 */
@media(max-width: 753px){
  .wrapper .card{
    width: calc(50% - 20px);
    margin-bottom: 20px;
  }
}
@media(max-width: 505px){
  .wrapper .card{
    width: 100%;
  }
}

登录后复制

JavaScript 代码 (script.js)

$(document).ready(function() {
  // 初始设置第一个进度条（如果需要，可以保持原样或删除）
  // 这里的第一个示例进度条，如果不需要动态更新，可以继续使用对象初始化
  let options = {
    startAngle: -1.55,
    size: 150,
    value: 0.85, // 初始值
    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({
    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) + "%");
  });

  // 点击按钮更新进度值
  $('#add').on('click', function(){
    // 使用 'value' 方法实现平滑过渡
    // 这里我们将值更新到0.80，动画将从当前值0.60平滑过渡到0.80
    $(".react .bar").circleProgress('value', 0.80);
    // 如果需要进一步更新，例如到0.30，再次点击会从0.80平滑过渡到0.30
    // $(".react .bar").circleProgress('value', 0.30);
  });
});

登录后复制

在这个示例中，我们首先使用一个配置对象初始化了 .react .bar 进度条，并设置了初始值 0.60。关键在于 $('#add').on('click', ...) 事件处理函数中，我们不再传入一个完整的配置对象，而是调用 $(".react .bar").circleProgress('value', 0.80)。这样，当点击“更新进度”按钮时，进度条将从 0.60 平滑地动画过渡到 0.80，而不是从 0 开始。

注意事项与最佳实践

参数类型： circleProgress('value', newValue) 方法的第二个参数 newValue 必须是一个介于 0 和 1 之间的浮点数。它代表了进度条的完成百分比（例如，0.5 表示 50%）。
初始值设置： 即使是第一次设置进度条，如果预期后续会有动态更新，也可以考虑在初始化时就使用 value 方法，或者确保在初始配置对象中明确设置 value。
百分比显示： circle-animation-progress 事件监听器非常有用，它在动画的每一帧都会触发，并提供当前的 stepValue（范围 0 到 1）。为了正确显示为百分比，需要将其乘以 100 并进行适当的格式化（例如，使用 toFixed()）。
插件文档： jquery-circle-progress 插件的官方文档是获取最新信息和更高级用法的最佳资源。在遇到复杂需求时，查阅文档可以帮助你找到更优雅的解决方案。
动画速度与缓动： 插件还支持配置动画的持续时间（animation: { duration: ... }）和缓动函数（animation: { easing: ... }），这些选项可以在初始化时设置，以进一步优化动画效果。

总结

通过理解 jquery-circle-progress 插件的不同方法签名，特别是 circleProgress('value', newValue) 的用法，我们可以轻松解决动态更新进度值时动画重置的问题。这种方法不仅能提供更流畅、更专业的动画体验，也符合插件的设计哲学，即通过特定方法来管理其内部状态。掌握这一技巧，将使你在构建交互式和数据驱动的 Web 界面时更加得心应手。

以上就是优化 jQuery Circle Progress：实现值更新时动画平滑过渡的详细内容，更多请关注php中文网其它相关文章！