вычислить float в диапазоне 0-1 для каждого элемента в массиве, используя easy

Question

В настоящее время я работаю над проектом, связанным с анимацией, и я пытаюсь добавить эффект легкости к числам.

Допустим, у нас есть массив n объектов, каждый объект среди других параметров содержит значение непрозрачности,В настоящее время я только что сделал это так, чтобы непрозрачность изменялась в linear от 1 до 0 (первый элемент имеет непрозрачность 1, в то время как последний элемент имеет 0).

Этокод:

document.body.innerHTML += '<style>.item,body{margin:5px}body{background:#000}.item{width:75px;height:75px;float:left;position:relative;box-sizing:border-box;border:1px solid red}.bg,.text{position:absolute;top:0;left:0}.text{width:100%;height:100%;font-size:30px;text-align:center;line-height:75px;color:#fff}.bg{background:red;width:calc(100% - 2px);height:calc(100% - 2px);margin:1px}</style><div class="wrap"></div>';

let array = [];

for(let i = 0; i < 27; i++) {
	array.push(i);
}

for(let i = 0; i < array.length; i++) {
	let linearOpacity = 1 - i / (array.length - 1);
	console.log(linearOpacity);
	document.querySelector('.wrap').innerHTML += (
			'<div class="item">' +
				'<div class="bg" style="opacity:' + linearOpacity + ';"></div>' +
				'<div class="text">' + i + '</div>' +
			'</div>'
		);
}

Теперь, как реализовать формулу замедления, при которой непрозрачность будет медленно уменьшаться в начале, чтобы она оставалась высокой в ​​течение более длительного времени, а затем уменьшалась быстрее ближе к концу?

Answer 1

Вместо x, переходящего от 1 к 0, используйте эту функцию:

a = -1.2 * t / (-t - 0.2)

, где t постепенно меняется от 1 к 0, а затем быстро.

Чтобы увидеть эффект, вы можете запуститькод:

for t in range(10, -1, -1):
    t = t / 10
    a = -1.2 * t / (-t - 0.2)
    print(t, '----> \t\t', a)

, который дает следующий вывод:

1.0 ---->        1.0
0.9 ---->        0.9818181818181818
0.8 ---->        0.96
0.7 ---->        0.9333333333333333
0.6 ---->        0.8999999999999999
0.5 ---->        0.8571428571428572
0.4 ---->        0.7999999999999998
0.3 ---->        0.72
0.2 ---->        0.6
0.1 ---->        0.3999999999999999
0.0 ---->        0.0