在特定时间段内触发特定数量的超时之间的缓和时间

Question

这是一道数学题。我想在特定时间段（比如 5 秒）内触发特定数量的 setTimeout（该数量基于 array 长度）。

第一个 setTimeout 应该从 0 sec. 开始，最后一个 5 sec.。之间的所有超时都应以 ease-in 效果开始，以便每个超时开始得更快。

有一个示例可以准确说明我想要实现的目标。
我在这条线上挣扎：

next += timePeriod/3.52/(i+1);

在演示示例中几乎完美（对于任何 timePeriod），但显然它不适用于不同的 letters.length，因为我使用了静态数字 3.52。

如何计算next？

var letters = [ 
  'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T'
];

var div        = $('#container');
var timePeriod = 5000; // 5 seconds;
var perLetter  = timePeriod/(letters.length-1); // it gives equal time between letters
var next       = 0;

for(var i=0; i<letters.length; i++){
  setTimeout(function(letter){
    //div.append('<span class="letter">' + letter + '</span>');
    // Used "|" instead of letter, For better redability:
    div.append('<span class="letter">|</span>');
  }, next, letters[i]);
  
  // Can't find the logic here:
   next += timePeriod/3.52/(i+1);
  
};


///////////////// FOR DEMO: ///////////////

var sec = timePeriod/1000;
var secondsInterval = setInterval(seconds, 1000);

var demoInterval = setInterval(function(){
  sec >= 0 || clearInterval(demoInterval);
  div.append('\'');
}, 30);

function seconds(){
  sec || clearInterval(secondsInterval);
  $('#sec').text(sec-- || 'DONE');
}
seconds();

.letter{
  color : red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id=container></span>
<span id=sec class=letter></span>

Answer 1

这是一个基于几何级数的解法。这有点愚蠢，但它有效。它会生成一个包含您的超时值的数组。

步数 = 数组的大小。

目标=总时间。

var steps = 50;
var target = 5000;

var fraction = 1.5 + steps / 7;
var ratio = (fraction-1) / fraction;
var n = target / fraction;
var sum = 0;
var arrayOfTimeouts = new Array(steps);
for(var i = 0; i < steps; i++){
    sum += n;
    arrayOfTimeouts[i] = n;
    n *= ratio;               
}

console.log(arrayOfTimeouts, sum);

Answer 2

var steps = letters.length;
var target = timePeriod;

function easeOutQuad(t, b, c, d) {
  t /= d;
  return -c * t*(t-2) + b;
};

var arrayOfTimeouts = new Array(steps);
var n;
var prev = 0;
for(var i = 1; i <= steps; i++){
  n = easeOutQuad(i, 0.0, target, steps);
  arrayOfTimeouts[i-1] = n-prev;   
  prev = n;
}

这个应该适用于任何输入值。

fiddle

请注意，图表似乎有点太快了，但我认为差异是时间缺陷的产物，因为我的数组的总和恰好等于 timePeriod。

在特定时间段内触发特定数量的超时之间的缓和时间

Ease time between firing specific number of timeouts in a specific period of time

javascript

jquery

math

settimeout

easing