javascript - 将jquery animate更改为手动控制功能

Question

我想将 jquery animate 函数更改为一个可以让我手动控制一切的函数。当前代码会延迟增加多个数字。这是代码(https://jsfiddle.net/6mrLv1ma/8/):

var ammount = 10;
var duration = 0.5;
var delay = (1-duration)/ammount; // 0.05

curDelay = 0;
for(var i=0;i<ammount;i++) {
	$( "#container" ).append("<div id='output"+i+"'>0</div>");
		setTimeout(
			(function(i) {
				return function() {
					animate(i, duration);
				}
			})(i, duration),curDelay*1000);
		curDelay += delay;
}

function animate(i, duration){
	$({value: 0}).animate({value: 1}, {
		duration: duration*1000,
		step: function() { 
    	var placement = "output"+i;
			document.getElementById(placement).innerHTML = this.value;
		}
	})
}

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

这是它的工作原理图:

因此，如果 currentProc = 0.2，则输出应如下所示:

0.3
0.16
0.07
0
0
0
0
0
0
0

我已经开始，但需要有关公式的帮助( https://jsfiddle.net/18kd85hn/1/ ):

var ammount = 10;
var duration = 0.5;
var delay = (1-duration)/ammount; // 0.05

function myFunction(currentProc){ // currentProc value 0 - 1
	var values = [];
	for(var i = 0; i<ammount;i++){
		var currentPos = i*delay; // formula
			
		document.getElementById("output").innerHTML += "<br>"+currentPos;
	}
}

myFunction(0.2)

<div id="output">output:</div>

Answer 1

知道了(https://jsfiddle.net/18kd85hn/7/)

var value = 1-(i*delay+duration-currentProc)/duration;

if (value<0){value =0}
if (value>1){value =1}

并替换了 jquery animate - https://jsfiddle.net/18kd85hn/8/