动画持续时间不准确

Question

我在SVG中创建了加载微调器,但是动画持续时间并不准确.例如:

• 30s动画持续时间〜26s真实
• 45s动画持续时间〜实际38秒
• 60年代动画持续时间〜实际上51秒

我很绝望,我不知道哪里可能有错.你能帮助我吗？

旋转器#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代码中,您将直径(@spinnerSize)设置为46,因此,stroke-dasharray计算值为144.44(大于圆周).

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

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

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;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<svg class="spinner">
  <circle cx="23" cy="23" r="20" />
</svg>

^{1.仅在代码段中使用无前缀库以避免浏览器前缀.
2.我使用了Less2CSS上的Online Less编译器生成的编译CSS .}