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

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

感谢任何和所有帮助。

Answer 1

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

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

所以解决办法就是夹紧它。设置在更新中可以移动的最小量(2 像素或 1 像素，或 0.5 像素...或随意调整)。

另一种选择(最终是相似的，但可能有点跳跃)是设置阈值距离。说“一旦距离 home 4 像素以内，就捕捉到末尾”，或者切换到线性模型，而不是继续缓动。