代码之家 › 专栏 › 技术社区 › cvdv

如何平滑css平行循环旋转动画?

css-animations css

cvdv · 技术社区 · 8 年前

当它完成一个完整的循环时,它似乎会停止一秒钟。我读到笔划dashoffset应该是周长或更大,但它仍然有延迟。

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

.progress {
  stroke: #000;
  stroke-width: 4;
  stroke-dashoffset: 0;
  stroke-dasharray: 65;
  animation: progress-indef 2s linear infinite;
}

@keyframes progress-indef {
  0% { stroke-dashoffset: 251; }
  100% { stroke-dashoffset: 0; }
}

2 回复 | 直到 8 年前

tao 8 年前

动画看起来很好,执行正确。

如果在某些设备/浏览器组合上笨手笨脚,那不是因为考虑不周,而是因为你正在制作动画 stroke-dashoffset 。

我会切换到动画 transform ,资源密集度较低:

.progress {
  stroke: #000;
  stroke-width: 4;
  stroke-dashoffset: 0;
  stroke-dasharray: 65;
  animation: progress-indef 2s linear infinite;
  transform-origin: 50% 50%;
  stroke-dashoffset: 250.92135620117188;
}

@keyframes progress-indef {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

注: 我改变了 笔划dashoffset 到 250.92135620117188 因为这是返回的长度(但我不认为这是造成问题的原因):

console.log(document.querySelector('.progress').getTotalLength())

Italo Borges 8 年前

在这种情况下,我建议只使用css来实现您需要的功能。使用边框和动画,可以获得相同的结果。

css

.loader {
   animation: loader-rotate 2s infinite linear;
   border-bottom: 5px solid transparent;
   border-left: 5px solid #000;
   border-top: 5px solid transparent;
   border-right: 5px solid #000;
   border-radius: 50%;
   height: 100px;
   position: relative;
   transform: translateZ(0);
   width: 100px;
}

@keyframes loader-rotate {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

HTML