2

我正在构建一个图像预加载动画，这是一个绘制的圆圈/饼图。每个“切片”都是 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;
}

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

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

4

1 回答 1

2

你有放松的想法。现实情况是，在某些时候你会限制价值。
如果你想学一点，你可以复习一下芝诺的悖论（这里合适的是阿喀琉斯和乌龟）——它真的很短……二分法悖论是同一枚硬币的另一面。

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

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

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

于 2013-02-18T12:00:00.893 回答