基于百分比的 SCSS 停止关键帧 SVG 圆形动画

Posted 2023-03-06

【中文标题】基于百分比的 SCSS 停止关键帧 SVG 圆形动画

【英文标题】：SCSS stop keyframe SVG circle animation based on percentage

【发布时间】：2019-08-17 02:31:59

【问题描述】：

刚刚创建了我的第一个关键帧进度指示器，我在我的 react 项目中使用它。我想将百分比状态推送到此关键帧，以便我可以将百分比填充到某个点。现在，它填充但我不明白如何停止动画。例如，我希望当我推动一个带有 '50' 的道具时，填充物在 50% 处停止。

JSfiddle example

<svg   class="circle--static">
  <circle cx="100" cy="100" r="71" stroke="#cde9db" stroke- fill-opacity="0" />
</svg>
<svg   class="circle--animated">
  <circle cx="100" cy="100" r="71" stroke="#68c087" stroke- fill-opacity="0" />
</svg>

.circle--static 
      circle 
         stroke-dasharray: 4;
         animation: stroke 2s ease-out forwards;
       
   

   .circle--animated 
      top: 0;
      left: 0;
      position: absolute;

      circle 
         stroke-dasharray: 1000;
         stroke-dashoffset: 1000;
         animation: stroke 60s ease-out forwards;
         animation-iteration-count: infinite;
      

      @keyframes stroke 
         to 
            stroke-dashoffset: 0;
         
      

      @keyframes fadeIn 
         to 
            opacity: 1;
         
      
   

【参考方案1】：

可以使用getTotalLength 方法找到 SVG 中路径的总长度。在您的情况下，您还可以使用圆的周长公式 (2*Math.PI*r)。

无论如何，您需要知道要设置动画的路径的长度，在本例中为 445。

stroke-dasharray: 445;
stroke-dashoffset: 445;

如果您想在 50% 处停止动画，这意味着您必须将其停止在 445 / 2 = 222.5

 @keyframes stroke 
      to 
        stroke-dashoffset: 222.5;
      
    

接下来是演示。希望对你有帮助。

svg 
  border: 1px solid;


.circle--static circle 
  stroke-dasharray: 4;
  animation: stroke 2s ease-out forwards;


.circle--animated 
  top: 0;
  left: 0;
  /*position: absolute;*/

.circle--animated circle 
  stroke-dasharray: 445;
  stroke-dashoffset: 445;
  animation: stroke 6s ease-out forwards;
  animation-iteration-count: infinite;

@keyframes stroke 
  to 
    stroke-dashoffset: 222.5;
  

@keyframes fadeIn 
  to 
    opacity: 1;
  

<svg   class="circle--static">
  <circle cx="100" cy="100" r="71" stroke="#cde9db" stroke- fill-opacity="0" />
</svg>


<svg   class="circle--animated">
  <circle id="kk" cx="100" cy="100" r="71" stroke="#68c087" stroke- fill-opacity="0" />
</svg>

【讨论】：

非常感谢，很好的解释！ :)

只是一个额外的小问题，我们可以通过什么属性更改动画的起点，因为它应该从顶部 (0%) 而不是 25% 开始:)

在这种情况下，您可能需要旋转 svg 画布或考虑使用 <path> 而不是圆形。