Chart.js环形图倒计时平滑扫动动画实现方案问询

我之前做类似的倒计时计时器时，也踩过这个跳动感的坑——直接每秒重绘确实会让环形图有生硬的跳变。要实现像时钟扫动那样的平滑过渡，核心是让Chart.js利用自身的动画系统，从当前状态匀速过渡到下一秒的状态，而不是强制重绘。下面是具体的解决方案：

核心思路 #

1. 让动画时长和每秒的更新间隔完全匹配，确保每一秒的过渡刚好平滑完成
2. 使用线性缓动函数，模拟时钟的匀速扫动效果
3. 直接修改现有图表的数据并触发更新，让Chart.js自动衔接上一状态的动画

完整代码示例 #

1. 初始化图表 #

// 基础配置
let remainingSeconds = 60;
const totalSeconds = 60;
const color = "#2563eb"; // 替换成你的进度条颜色
const fillColor = "#e2e8f0"; // 替换成你的背景填充色

// 计算初始进度百分比
let currentPercentage = (remainingSeconds / totalSeconds) * 100;

// 初始化环形图
const ctx = document.getElementById("doughnut-timer").getContext("2d");
const timerChart = new Chart(ctx, {
  type: "doughnut",
  data: {
    datasets: [
      {
        data: [currentPercentage, 100 - currentPercentage],
        backgroundColor: [color, fillColor],
      },
    ],
  },
  options: {
    tooltips: { enabled: false },
    cutoutPercentage: 75,
    animation: {
      duration: 1000, // 动画时长1秒，和每秒更新间隔完全同步
      easing: "linear", // 匀速动画，消除快慢变化的生硬感
    },
    legend: { display: false }, // 隐藏图例，更贴合计时器的视觉效果
    responsive: true,
    maintainAspectRatio: false,
  },
});

2. 启动平滑倒计时 #

// 每秒更新一次进度
const countdownTimer = setInterval(() => {
  remainingSeconds--;

  // 倒计时结束逻辑
  if (remainingSeconds < 0) {
    clearInterval(countdownTimer);
    // 这里可以添加倒计时结束的回调，比如改变颜色、触发提示等
    timerChart.data.datasets[0].backgroundColor[0] = "#ef4444";
    timerChart.update();
    return;
  }

  // 计算新的进度百分比
  const newPercentage = (remainingSeconds / totalSeconds) * 100;

  // 直接修改现有数据集（关键：保留上一状态）
  timerChart.data.datasets[0].data[0] = newPercentage;
  timerChart.data.datasets[0].data[1] = 100 - newPercentage;

  // 触发平滑更新，Chart.js会自动从当前状态过渡到新状态
  timerChart.update();
}, 1000);

关键细节解释 #

• 动画时长匹配：把animation.duration设为1000ms，刚好和每秒的更新间隔同步，这样每次进度更新时，环形图会用整整1秒的时间完成平滑过渡，完全消除跳变感。
• 线性缓动：使用'linear'缓动函数，让环形进度条的扫动是匀速的，和真实时钟的运动逻辑一致，避免默认缓动带来的加速/减速生硬感。
• 直接修改数据：不要每次重新创建图表或替换整个数据集，而是直接修改现有data数组的值，再调用update()。这样Chart.js会识别到状态变化，并基于上一帧的位置启动动画，完美衔接过渡。

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