帮助自定义 jquery 缓动函数

发布于 2024-12-02 03:06:21 字数 500 浏览 3 评论 0原文

我需要一个相当非典型的 jquery 缓动函数。它基本上与传统的 EasyInOut 缓动相反，因为我希望该过程从快速介绍到较慢的中间部分，再到快速结束（您可能称之为 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
};

任何帮助将不胜感激！

原文

I need a rather atypical jquery easing function. It's basically the opposite of your traditional easeInOut easing because I want the process to go from a fast intro to a slower middle part to a fast outro (you might call it speedInOut).

Unfortunately my math is a little rusty and I need someone to point me in the right direction in terms of how to get started.

A hyperbolical sinus curve (sinh) goes somewhat in the right direction of what I'm looking for , but I need it limited between 0 and 1 on both axis.

Here is the jquery easing function skeleton I'm working with

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

Any help would be greatly appreciated!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半城柳色半声笛 2024-12-09 03:06:21

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

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

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

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

I figured things out with the help of my previously mentioned, brilliant colleague (it was actually him who did all the heavy lifting).

The final math formular I ended up using was:
(sinh((x - 0.5) * 5) + sinh(-(x - 0.5)) + (sinh(2.5) + sin(-2.5))) / (sinh(2.5) * 1.82)

I also needed to implement sinh in javascript because it's not part of the math object, this however is fairly easy:

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

The easing function itself looks like this:

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

回复收藏 0 原文

~没有更多了~