如何平滑CSS环形循环旋转动画？解决循环卡顿问题

我来帮你搞定这个卡顿问题！你遇到的循环卡顿，本质是动画的起始和结束状态没有平滑衔接，导致每次循环时出现跳变。咱们一步步来修复：

问题根源分析 #

你设置的stroke-dasharray: 65远小于圆的实际周长（半径40的圆周长约为251.2），而且动画关键帧的stroke-dashoffset变化逻辑没和周长匹配，导致循环到结尾时，offset突然跳回初始值，产生卡顿感。

修复方案 #

1. 用CSS变量管理周长 #

先把圆的周长用CSS变量定义出来，方便后续维护和计算：

.progress {
  --radius: 40;
  --circumference: calc(2 * 3.14159 * var(--radius));
  /* 其他原有样式 */
}

2. 调整stroke-dasharray实现平滑循环 #

如果想要的是一段圆弧绕着圆环转动的效果，我们需要把stroke-dasharray设置为「圆弧长度 + 剩余周长」，这样整个圆环上只有一段可见的圆弧，其余部分透明。比如我们要保留你原来设置的65长度圆弧：

stroke-dasharray: 65 calc(var(--circumference) - 65);

3. 优化动画关键帧 #

动画的stroke-dashoffset需要从0变化到完整的周长，这样当动画结束（100%）时，offset的值和起始（0%）的状态刚好衔接，循环时就不会有跳变：

@keyframes progress-indef {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: var(--circumference);
  }
}

完整修改后的代码 #

<svg width="100" height="100">
  <g>
    <circle class="progress" r="40" cx="50" cy="50" fill="none" />
  </g>
</svg>

.progress {
  --radius: 40;
  --circumference: calc(2 * 3.14159 * var(--radius));
  stroke: #000;
  stroke-width: 4;
  stroke-dasharray: 65 calc(var(--circumference) - 65);
  animation: progress-indef 2s linear infinite;
}

@keyframes progress-indef {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: var(--circumference);
  }
}

这样修改后，动画循环时就会完全平滑，不会再出现卡顿啦！原理是动画结束时的stroke-dashoffset刚好等于周长，和起始状态的视觉效果完全一致，浏览器可以无缝衔接循环。

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