帮助自定义 jquery 缓动功能

Posted 2023-05-08

【中文标题】帮助自定义 jquery 缓动功能

【英文标题】：Help with custom jquery easing function

【发布时间】：2011-11-06 18:27:19

【问题描述】：

我需要一个相当非典型的 jquery 缓动函数。它基本上与您传统的 easeInOut 缓动相反，因为我希望该过程从快速的介绍到较慢的中间部分再到快速的结尾（您可以称之为 speedInOut）。

不幸的是，我的数学有点生疏，我需要有人指出我如何开始的正确方向。

双曲正弦曲线 (sinh) 有点朝着我正在寻找的正确方向，但我需要它在两个轴上都限制在 0 和 1 之间。

这是我正在使用的 jquery 缓动函数骨架

$.easing.speedInOut = function(t, millisecondsSince, startValue, endValue, totalDuration) 
     if(t = 0) return startValue;
     if(t = 1) return startValue + endValue;
     // custom function should go here
;

任何帮助将不胜感激！

【问题讨论】：

我的一位才华横溢的同事想出了这个：sinh((x - 0.5) * 10) + sinh(5)) / (sinh(5) * 2 see it rendered out on wolfram alpha 这已经很接近了到我想要的，它只是在中间部分放慢了一点

也许math.stackexchange.com 那边的人能帮到你？

我最终使用的最终数学公式是：(sinh((x - 0.5) * 5) + sinh(-(x - 0.5)) + (sinh(2.5) + sin(-2.5 ))) / (sinh(2.5) * 1.82) 我会尽快发布我自己问题的正确答案（从现在起 6 小时后，我不允许更早，因为我有不到 100 个代表）

【参考方案1】：

我在前面提到的才华横溢的同事（实际上是他完成了所有繁重的工作）的帮助下解决了问题。

我最终使用的最终数学公式是： (sinh((x - 0.5) * 5) + sinh(-(x - 0.5)) + (sinh(2.5) + sin(-2.5))) / (sinh(2.5) * 1.82)

我还需要在 javascript 中实现 sinh，因为它不是数学对象的一部分，但这相当容易：

function sinh(aValue) 
var myTerm1 = Math.pow(Math.E, aValue);
var myTerm2 = Math.pow(Math.E, -aValue);
return (myTerm1-myTerm2)/2;

缓动函数本身如下所示：

$.easing.speedInOut = function(x, t, b, c, d) 
    return (sinh((x - 0.5) * 5) + sinh(-(x - 0.5)) + (sinh(2.5) + Math.sin(-2.5))) /    (sinh(2.5) * 1.82);
;