如何不刷新页面修改jQuery插件asPieProgress的动画速度？

首先，你遇到的问题很常见——大多数jQuery进度条插件在首次初始化后，不会自动覆盖正在运行的动画配置，因为它们内部已经创建了定时器或动画实例，直接重新调用初始化方法只会无效或者创建冲突的实例。下面分两种方案帮你解决：

方案一：改造现有插件调用逻辑 #

尝试先终止当前动画、清理插件绑定的数据，再重新初始化。具体修改你的setPie函数如下：

function setPie(t) {
  const $pie = $('.pie_progress--slow');
  
  // 1. 获取插件实例（如果插件支持存储实例数据）
  const pieInstance = $pie.data('pie_progress');
  
  // 2. 停止当前动画（如果插件提供stop方法）
  if (pieInstance && typeof pieInstance.stop === 'function') {
    pieInstance.stop();
  }
  
  // 3. 重置元素状态：清除插件数据、移除动画相关样式/类
  $pie.removeData('pie_progress')
      .css('animation', 'none')
      .removeClass('pie_progress--animate'); // 替换为插件实际使用的动画类
  
  // 4. 重新初始化并启动动画
  $pie.asPieProgress({
    namespace: 'pie_progress',
    goal: 1000,
    min: 0,
    max: 1000,
    speed: t * 600,
    easing: 'linear'
  }).asPieProgress('start'); // 如果需要手动启动动画
}

注意：这里的stop方法和动画类需要对应你使用的插件实际API，你可以查看插件的文档，确认它是否提供终止动画、销毁实例的方法。如果插件没有这些API，这种方法可能效果有限。

方案二：自己实现可控的环形进度条 #

既然找不到支持动态调速+暂停/恢复的插件，不如自己用SVG实现一个轻量的版本，完全可控：

HTML结构 #

<!-- 环形进度条SVG -->
<svg class="custom-pie" width="200" height="200" viewBox="0 0 200 200">
  <!-- 背景圆环 -->
  <circle cx="100" cy="100" r="90" fill="none" stroke="#eee" stroke-width="10" />
  <!-- 进度圆环 -->
  <circle class="pie-progress" cx="100" cy="100" r="90" fill="none" stroke="#4CAF50" stroke-width="10" transform="rotate(-90 100 100)" />
</svg>

<!-- 控制按钮 -->
<button onclick="togglePieAnimation()">暂停/恢复</button>
<button onclick="adjustSpeed(0.5)">慢速</button>
<button onclick="adjustSpeed(2)">快速</button>

JavaScript逻辑 #

const progressCircle = document.querySelector('.pie-progress');
const circleRadius = 90;
const circumference = 2 * Math.PI * circleRadius; // 圆环周长
let currentProgress = 0;
const targetProgress = 100; // 目标进度（百分比）
let isAnimating = true;
let speedFactor = 1; // 速度系数，越大越快
let animationFrameId;

// 初始化圆环样式
progressCircle.style.strokeDasharray = circumference;
progressCircle.style.strokeDashoffset = circumference;

// 更新进度的核心函数
function updateProgress() {
  if (!isAnimating) return;

  // 根据速度系数计算进度增量
  const progressIncrement = 0.3 * speedFactor;
  currentProgress = Math.min(currentProgress + progressIncrement, targetProgress);

  // 更新进度圆环的偏移量
  const offset = circumference * (1 - currentProgress / 100);
  progressCircle.style.strokeDashoffset = offset;

  // 未达到目标则继续动画
  if (currentProgress < targetProgress) {
    animationFrameId = requestAnimationFrame(updateProgress);
  }
}

// 启动动画
updateProgress();

// 暂停/恢复动画
function togglePieAnimation() {
  isAnimating = !isAnimating;
  if (isAnimating) {
    updateProgress();
  }
}

// 动态调整速度
function adjustSpeed(newSpeed) {
  speedFactor = newSpeed;
}

这个实现用requestAnimationFrame驱动动画，随时可以通过修改speedFactor调整速度，暂停/恢复也只需切换isAnimating状态，完全满足你的需求。

内容的提问来源于stack exchange，提问作者user3079765