javascript - 使用Javascript创建自定义缓动

我正在尝试创建自定义缓动函数，但遇到了一些困难。换句话说，数学使我感到困惑。

我希望函数增加页面中某些元素的宽度，并且增量值需要随着元素索引的增加而减小。

考虑以下值:

50, 150, 230, 280, 310, 330

尽管我很欣赏可能无法生成这些精确值，但我本质上希望的是一个能够接近这些值的函数。

这是我到目前为止的内容:

$('.something').each(function(i){
    var scale = Math.round(30*(i/10)*(2-(i/10)));
    dimension = scale*dimension;
    console.log(dimension);
});

这可能是非常容易的，但是我今天正在努力使自己的头脑变得清晰，所以任何帮助将不胜感激

最佳答案

这是一个实时演示，它演示了如何使用二次缓和功能来实现与您所描述的曲线相似的曲线。

var out = document.getElementById("output");

// t: current time, b: beginning value, c: change in value, d: duration

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

for (var i = 0; i < 1; i+=0.1) {
  out.innerHTML += Math.round(easeOutQuad(i, 50, 280, 1)) + "<br>";
}

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

大声疾呼@ c-smile以链接注释中的jQuery easeOutQuad function，此演示基于该注释。