Javascript/Canvas 预加载动画的数学和缓动

Question

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

我正在使用 requestAnimFrame，它工作得很好，而且我有一个 deltaTime 设置来限制动画的时间，但是我无法理解数学。我能得到的最接近的是它动画并缓和到它应该在的位置附近，但随后值增量变得越来越小。本质上它永远不会达到完成的价值。 （以 90 度为例，如果已加载一张图像）。

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

我觉得我拥有所有正确的元素和价值观。我只是将它们错误地组合在一起。

任何和所有帮助表示赞赏。

Answer 1

你已经有了放松的想法。现实情况是，您有时会限制价值。
如果你想学习一点，你可以复习Zeno's paradoxes（这里合适的是阿喀琉斯和乌龟）——它真的很短……二分法悖论是同一枚硬币的另一面。

基本上，无论“这里”或“那里”可能在哪里，您都只完成了一半，因此您永远无法迈出“最后”一步。
在处理分数时，例如使用缓动，这是非常正确的。你可以总是变小。

所以解决办法就是把它夹住。设置您可以在更新中移动的最小量（2px 或 1px，或 0.5px... 或玩弄）。

另一种选择（最终相似，但可能有点跳跃）是设置阈值距离。说“只要它在 home 4px 以内，就捕捉到最后”，或者切换到线性模型，而不是继续缓动。