Question

我在SVG中创建了加载微调器，但动画持续时间并不准确。例如：

30s动画持续时间〜26s in real
45s动画持续时间〜实际的38s
60s动画持续时间〜实时51s

我绝望了，我不知道哪里可能有错误。你能救我吗？

微调器＃1的屏幕

微调器＃2的屏幕 - 稍后

<svg class="circle">
  <circle cx="23" cy="23" r="20"/>
</svg>

减：

@spinnerSize: 46;

svg.spinner {
  display: block;
  width: (@spinnerSize + 0px);
  height: (@spinnerSize + 0px);
  x: 0px;
  y: 0px;
  background: url("../images/ico_timer_small.png") center center no-repeat;

  circle {
    fill: transparent;
    stroke: #027eff;
    stroke-width: 3;
    stroke-dasharray: (3.14 * @spinnerSize);
    transform-origin: (0.5px * @spinnerSize) (0.5px * @spinnerSize) 0;
    transform: rotate(-90deg);
    animation-name: spinner;
    animation-timing-function: linear;
    animation-duration: 30s;
    stroke-linecap: butt;
  }
}

@keyframes spinner {
  from {
    stroke-dashoffset: (3.14 * @spinnerSize);
  }
  to {
    stroke-dashoffset: 0;
  }
}

Answer 1

stroke-dasharray值应等于圆的周长，以使此动画正常工作。圆的半径仅为20 ，因此圆周（2 * PI *半径）等于125.66，但在Less代码中设置了直径（{{1} }）因为46，因此，@spinnerSize的计算值为144.44（大于圆的周长）。

对于30秒内从0到144.44的值，它必须以每秒4.81递增（大约），因此当它达到26s标记时，该值变为（26 * 4.81）= 125.81（大约）。由于此值大于周长，因此看起来动画已提前完成，而实际上它仍然是动画值直到达到144.44。

在下面的代码段中，我将stroke-dasharray设置为最终值，并按预期运行30秒。在较少的代码中，您需要根据圆的半径的两倍来计算125。不要直接修改stroke-dasharray变量的值，因为这会修改一些其他属性并最终影响SVG圈的显示。

@spinnerSize

svg.spinner {
  display: block;
  width: 46px;
  height: 46px;
  /*x: 0px;
  y: 0px;*/
  background: url("../images/ico_timer_small.png") center center no-repeat;
}
svg.spinner circle {
  fill: transparent;
  stroke: #027eff;
  stroke-width: 3;
  stroke-dasharray: 125;
  transform-origin: 23px 23px 0;
  transform: rotate(-90deg);
  animation-name: spinner;
  animation-timing-function: linear;
  animation-duration: 30s;
  stroke-linecap: butt;
}
@keyframes spinner {
  from {
    stroke-dashoffset: 125;
  }
  to {
    stroke-dashoffset: 0;
  }
}

^{1.仅在代码段中使用无前缀库以避免浏览器前缀。

2.我使用了Less2CSS上的Online Less编译器生成的编译CSS。
功能}

动画持续时间不准确

1 个答案: