Javascript/Canvas预加载动画的数学和易用性

我正在构建一个图像预加载动画，这是一个绘制的圆/饼图。每个“切片”都是totalImages/imagesLoaded。因此，如果有四个图像和两个已加载，它应该随着时间推移绘制到180

我正在使用requestAnimFrame，它工作得很好，我有一个deltaTime设置来限制动画的时间，但是我在数学方面遇到了麻烦。我能得到的最接近的结果是，它动画化，并简化到它应该在的位置附近，但随后值增量变得越来越小。基本上，它永远不会达到完成的值。（例如，如果加载了一个图像，则为90度）

我觉得我拥有了所有正确的元素和价值观。我只是把它们拼错了

---

感谢您的帮助。

您已经有了放松的想法。现实情况是，在某一点上，你会设定价值上限。
如果你想学一点东西，你可以温习一下（这里最合适的是阿喀琉斯和乌龟）——它真的很短。。。二分法悖论是同一枚硬币的另一面

基本上，无论“这里”或“那里”可能在哪里，你都只能走到一半，因此你永远无法迈出“最后”一步。
在处理分数时，比如放松，这是非常正确的。你总是可以变小

所以解决办法就是夹紧它。设置在更新中可以移动的最小数量（2px或1px，或0.5px…或播放）

---

另一种选择（结果类似，但可能有点跳跃）是设置阈值距离。说“只要它在家的4倍以内，就快结束”，或者切换到线性模型，而不是继续放松。

完美。我曾想过抓拍，但我想我可能错过了什么。我最近被告知了乌龟悖论！你知道jQuery的easing是如何处理这个问题的吗？所以，我使用以下命令钳制它：

this.currentArc+=this.Clamp（（newArc-hello）*this.time.delta，2500）我使用的钳制功能正在工作，我注销了值。尽管放松是显而易见的，但放松是最小的，尽管尝试了许多放松/放松方程式。我的计算中有没有什么不允许适当放松的地方？在放松时，它在结束前会减速。经济放缓几乎不明显。
var totalImages = 4;
var imagesLoaded = 1;
var currentArc = 0;

function drawPie(){
  var newArc = 360 / totalImages * this.imagesLoaded // Get the value in degrees that we should animate to
  var percentage = (isNaN(currentArc / newArc) || !isFinite(currentArc / newArc)) || (currentArc / newArc) > 1 ? 1 : (currentArc / newArc); // Dividing these two numbers sometimes returned NaN or Infinity/-Infinity, so this is a fallback
  var easeValue = easeInOutExpo(percentage, 0, newArc, 1);

  //This animates continuously (Obviously), because it's just constantly adding to itself:
  currentArc += easedValue * this.time.delta;

  OR

  //This never reaches the full amount, as increments get infinitely smaller
  currentArc += (newArc - easedValue) * this.time.delta;
}

function easeInOutExpo(t, b, c, d){
  return c*((t=t/d-1)*t*t + 1) + b;
}