代码之家 › 专栏 › 技术社区 › Mevia

使用ease为数组中的每个项计算0-1范围内的浮点值

math animation algorithm javascript

Mevia · 技术社区 · 6 年前

我目前正在工作的动画相关的项目,我正在努力增加缓解效果的数字。

假设我们有一组 n 对象,其他参数中的每个对象都保持不透明度值。暂时我只是让它变得不透明 linear 1 到 0 1. 而最后一个元素 ).

代码如下:

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

现在,如何实现减缓公式,这将导致透明度下降缓慢,在开始时,它将保持较高的时间更长,然后减少更快地接近结束?

1 回复 | 直到 6 年前

guroosh 6 年前

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