Question

有没有办法转换兼容jQuery的缓动函数，以便它们只需要一个参数？（例如，将它们与skrollr）一起使用。

例如easeOutBack需要六个参数。

原始功能：

easeOutBack: function (x, t, b, c, d, s) {
    if (s == undefined) s = 1.70158;
    return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}

我想要的是什么：

easeOutBack: function (x) {
    // same return
}

Answer 1

你去了：

easeOutBack: function (p, s) {
    s = 1.70158;
    p = p - 1;
    return (p * p * ((s + 1) * p + s) + 1);
}

我将一劳永逸地记录这个过程。首先阅读此内容以了解变量的含义jQuery easing function — variables' comprehension。

现在很容易。

由于c为1且b为0，我们可以将其删除（与c相乘，b为添加，这两个都是noops。）

if (s == undefined) s = 1.70158;
return ((t=t/d-1)*t*((s+1)*t + s) + 1);

现在我们只将s设置为幻数1.70158，因为我不知道是否有其他东西会被jQuery传递给缓动函数（skrollr肯定不会）。< / p>

s = 1.70158;
return ((t=t/d-1)*t*((s+1)*t + s) + 1);

现在jQuery已经过高度优化，让我们在表达式中将这个奇怪的赋值移到

之前的行

s = 1.70158;
t = t/d - 1;
return (t*t*((s+1)*t + s) + 1);

几乎就在那里！如果您阅读t和d，您会注意到t/d是动画到目前为止进展的百分比。猜猜是什么，这就是skrollr所谓的p（参见 p ercentage）。我们只需将t/d替换为p

s = 1.70158;
t = p - 1;
return (t*t*((s+1)*t + s) + 1);

最后一步是将t重命名为p，因为我们不需要第三个变量。

s = 1.70158;
p = p - 1;
return (p*p*((s+1)*p + s) + 1);

Answer 2

Prinzhorn的回答是正确的 - 我只是想指出一个事实，即您可以使用this生成器轻松创建自己的函数，并使用上面显示的数学转换它们以与Skrollr一起使用。

示例

function(t, b, c, d) { var ts=(t/=d)*t; var tc=ts*t; return b+c*(1*tc*ts + -2.5*ts*ts + -1*tc + 4*ts + -0.5*t); }

可以像这样使用

<div data-0="opacity[easeCustomAwesomeSuper]:0"></div> <script> $(function() { var s = skrollr.init({ easing: { easeCustomAwesomeSuper: function(p) { return p*p*p*p*p + -2.5*(p*p*p*p) + -1*(p*p*p) + 4*(p*p) + -0.5*p; } } });}); </script>

我已创建this要点以显示详细信息。

jQuery缓动函数有一个参数

2 个答案: