更改jquery动画以手动控制功能

Question

我想将jquery animate函数更改为一个函数，让我可以手动控制所有内容。目前，代码会延迟多个数字。这是代码（https://jsfiddle.net/6mrLv1ma/8/）：

＆＃13;

＆＃13;

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;
		}
	})
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

以下是图表的工作原理：

因此，如果currentProc = 0.2，输出应该是这样的：

0.3
0.16
0.07
0
0
0
0
0
0
0

我已经开始但需要公式（https://jsfiddle.net/18kd85hn/1/）的帮助：

＆＃13;

＆＃13;

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)

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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/