动画时间不正确 [英] Animate-duration is not accurate

问题描述

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

I created loading spinner in SVG, but animation-duration is not accurate. For example:

• 动画持续时间为30秒〜实际为26秒
• 45s动画持续时间〜实际38s
• 60 s的动画持续时间，实际约为51 s

我很绝望，我不知道哪里可能有错误.你能帮我吗?

I'm desperate and I don't know where there may be a mistake. Can you help me?

第1个微调框的屏幕

第二个微调框的屏幕-稍后

Screen of spinner #2 - later

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

推荐答案

为使此动画正常工作，stroke-dasharray值应该等于圆的周长.圆的半径仅为20 ，因此周长(2 * PI *半径)等于125.66，但是在Less代码中，您设置了直径(@spinnerSize) <46>，因此stroke-dasharray的计算值为144.44(大于圆的周长).

The stroke-dasharray value should be equal to the circumference of the circle for this animation to work properly. The circle's radius is only 20 and so the circumference (2 * PI * radius) is equal to 125.66 but in the Less code you have set the diameter (@spinnerSize) as 46 and because of this, the stroke-dasharray has a computed value of 144.44 (greater than circumference of circle).

要使一个值在30秒钟内从0变为144.44，必须每秒增加(大约)4.81，因此，当它达到26s标记时，该值变为(26 * 4.81)= 125.81(大约) .由于此值大于圆周，因此看起来动画已提前完成，而实际上它仍在为该值设置动画，直到达到144.44.

For a value to go from 0 to 144.44 in 30s, it must be incremented (approximately) by 4.81 per second and so by the time it reaches the 26s mark, the value becomes (26 * 4.81) = 125.81 (approximately). Since this value is greater than the circumference, it looks like the animation has completed ahead of time whereas in reality it is still animating the value until it reaches 144.44.

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

In the below snippet, I've set 125 as the final value and it runs as expected for 30 seconds. In Less code, you need to calculate stroke-dasharray based on two times the radius of the circle. Do not directly modify the value of @spinnerSize variable because that would modify a few other properties and end up affecting the display of the SVG circle.

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.我使用了Online Less编译器在 Less2CSS 上生成的已编译CSS.}

<sup>1. Prefix-free library is used in snippet only to avoid browser prefixes.
2. I've used the compiled CSS generated by the Online Less compiler at Less2CSS.</sup>

这篇关于动画时间不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！