如何在几秒钟内将数字从00.000000增加到48.853373，乘以0.00001

Question

我使用地图坐标作为网站标志的一部分。(2.378628，48.853373)

我想要做的是，从0.000000中数出这两个数字，使它们在同一时间内达到给定的点数(3-5秒)，增加0.000001。那件事怎么可能？这使我的电脑崩溃，setInterval每毫秒做一件事，这是不够的。

while (i < 48.853373) {
  i = i + 0.000001;
  $('.js-center-lat').text(i);
}

Answer 1

听起来，您想要将浮点数“动画化”，以计数到定义的值。你有没有考虑过第三方库，比如CountUp.js？

CountUp.js是一个无依赖的轻量级JavaScript“类”，可以用来快速创建动画，以更有趣的方式显示数字数据。

关于如何使用它的快速示例：

var options = {
  useEasing: true, 
  useGrouping: true, 
  separator: '', 
  decimal: '.', 
};

var demo = new CountUp('myTargetElement', 0, 2.415543, 6, 2.5, options);

if (!demo.error) {
  demo.start();
} else {
  console.error(demo.error);
}

希望这能有所帮助！

Answer 2

当您启动动画(startTime)时，您需要花费时间，并且您可以确定动画应该持续多长时间(duration)。

对于每个动画步骤，您可以计算动画的百分比。

用这个百分比，你可以数出多个值。

​

let startTime = Date.now();
let duration = 3000;

function updateText() {
  let percent = Math.min(1, (Date.now() - startTime) / duration);
  // Math min ensures that percent does not become larger then 1

  $('.val1').text(50 * percent); // 0 - 50
  $('.val2').text(33 * percent); // 0 - 33
  $('.val3').text(13 + 10 * percent); // 13 - 23

  if (percent <= 1) {
    requestAnimationFrame(updateText)
  }
}

updateText();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="val1">
</div>
<div class="val2">
</div>
<div class="val3">
</div>

​