Question

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

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

考虑以下这些值：

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

这可能非常容易，但我今天很难理解数学，所以任何帮助都会非常感激

Answer 1

这是一个现场演示，展示了如何使用二次缓出功能来实现类似于您描述的曲线。

＆＃13;

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

＆＃13;

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

＆＃13;

向@ c-smile大喊大叫，以便在评论中链接jQuery easeOutQuad function，这个演示基于这些评论。

Answer 2

您可以通过Easing Functions Generator查看Robert Penner。它对于创建自定义缓动函数非常有用：

subprocess

使用Javascript

2 个答案: