如何在 jQuery 中创建 CSS "ease" 的等价？

Question

根据Ceaser，CSS transition-timing-function ease的详细CSS代码为cubic-bezier(0.250, 0.100, 0.250, 1.000)。这是我所知道的一切。如何将其转换为 jQuery 的缓动函数？

jQuery 的 $.easing 允许我们定义自定义缓动函数。例如，以下代码定义了一个名为 "custom" 的自定义缓动函数。（注：代码借自this thread。）

$.easing.custom = function (x, t, b, c, d) {
    var s = 1.70158; 
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

然后可以这样使用：$('#element').animate({ right: 100 }, 500, 'custom').

我想要做的是定义一个名为 "ease" 的自定义缓动函数，代码如下：

$.easing.ease = function (x, t, b, c, d) {
    ......
    ......
    ......
}

我该怎么做？

Answer 1

似乎没有在线转换工具或教程可以将 cuic-bezier 转换为 jQuery 等价。

但我发现了一个 jQuery 插件也可以达到这个目的。插件是 Bez.

所以在我的例子中，CSS transition-timing-function ease 可以被翻译成 jQuery with Bez as: $.bez([0.250, 0.100, 0.250, 1.000]).

如何在 jQuery 中创建 CSS "ease" 的等价？

How to create the equivalence of CSS "ease" in jQuery?

javascript

css

jquery

easing