Question

我正在构建一个图像预加载动画，即一个被绘制的圆/饼。每个'切片'都是totalImages / imagesLoaded。因此，如果有四个图像和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（这里适当的是阿基里斯和乌龟）上brush - 它真的很短......二分法悖论是同一枚硬币的另一面

基本上，你只有一半在那里，不管“在这里”或“那里”可能在哪里，因此你永远不会采取“最终”步骤。
在处理分数时，例如缓和，这是非常正确的。您可以始终变小。

所以解决方案就是把它钳住。设置您可以在更新中移动的最小金额（2px或1px，或0.5px ......或玩游戏）。

替代方案（最终类似，但可能有点跳跃）是设置阈值距离。要说“一旦它在家中4px之内，快速结束”，或切换到线性模型，而不是继续宽松。

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

1 个答案: