React计时器SVG进度环动画偏慢及body背景底部异常求解

SVG进度环动画速度异常 #

• 为什么之前把计算值乘2不生效：SVG圆环的dash长度上限就是自身周长（r=150px时周长≈942px），超过这个值时dash会自动重复填满整个圆环，和dash=942的显示效果完全一样。你直接把计算结果乘2之后，初始dash值变成了近2倍周长，要等一半的总时间过去，dash长度才会降到周长以下开始出现缺口，前半段环全程满圈没有变化，自然会觉得调整没有生效。
• 为什么动画速度只有预期的一半：你给#path设置了1s的stroke-dasharray过渡时长，JS定时器又刚好每1000ms更新一次dash值，两次更新的间隔和过渡时长完全重合，每次渐进式过渡还没走完，下一次值更新就触发了新的过渡，视觉上的进度直接被拉长了一倍。
• 正确提速操作：
  • 计算dash值时加边界限制，不要让值超过942：var strke_res = Math.min(942, Math.max(0, (this.timeLeft * 942 / this.totalTime) * 2))，既保证dash减少量翻倍，也不会出现超过周长的无效值。
  • 把#path的CSS过渡时长从1s改成500ms，匹配翻倍后的动画速度，避免过渡滞后。

body背景、对齐异常 #

• 问题原因：html和body默认没有绑定视口高度，实际高度仅等于内容高度，加上浏览器默认给body加了8px的边距，你写的flex居中规则实际是在内容范围内居中，不是在整个视口里垂直居中，内容一高，渐变背景就铺不满，对齐也会错位。
• 修复方法：给CSS追加以下规则，去掉默认边距，把最小高度设为视口高度：

html, body {
  margin: 0;
  min-height: 100vh;
}

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