标签: easing-functions

我正在寻找一个可以与jQuery一起使用的自定义缓动函数的在线列表.

我对使用插件不感兴趣,也不使用jQuery UI.

我发现下面有一个很好的小反弹,但我正在寻找其他几个,所以我可以有一些选择.

代替其他功能,简要解释这个功能如何运作和可能被修改将是非常棒的.谢谢!

例:

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

编辑#1:

这是所有jQuery UI缓动函数的在线演示.来自UI的源函数由Jake在下面的正确答案中发布.

http://api.jqueryui.com/easings/

编辑#2:

事实证明,我上面发布的示例缓动函数与jQuery UI中的"easeInOutBack"完全相同.

编辑#3:

这里有一些免费下载的独立缓和方程式......

http://www.robertpenner.com/easing/

什么是在动画的上下文中缓动函数.似乎dojo,jquery,silverlight,flex和其他UI系统都具有缓和功能的概念.我找不到缓和功能的好解释？任何人都可以解释缓和功能的概念,或指出它们的一个很好的解释,我感兴趣的概念不在框架的具体细节中？

缓和是严格用于位置还是一般的,可以应用于对象的任何属性？

jQuery的缓动函数如何工作？举个例子:

easeInQuad = function (x, t, b, c, d) {
    return c*(t/=d)*t + b;
};

这是如何运作的？每个参数有什么作用？我如何为动画实现一些愚蠢的缓和？

另外我如何将缓动模式附加到jQuery,将它加载到$ .easing中足够好？

如何修改这个jQuery缓动函数以产生一个不那么夸张的反弹？

$.easing.easeOutElasticSingleBounce = function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};

我正在寻找一个模拟这个的缓动函数:

http://sandbox.scriptiny.com/tinyslider2/

tinyslider2使用类似的功能,看起来像这样:

new Function(this.n+'.slide('+(i==1?t+(12*d):t+(4*d))+','+(i==1?(-1*d):(-1*d))+','+(i==1?2:3)+','+a+')')

但是我今天似乎无法理解数字,以便将tinyslider2方程符合jQuery缓动格式.如果有人能给我一个例子,我会非常感激.

UPDATE

这个等式非常接近:

$.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 …

我现在经常使用CSS过渡,但发现限制只能访问缓入,缓出等.贝塞尔曲线选项似乎允许最大程度的控制,但即使这样也不允许您指定实际的缓动方程会模拟弹性缓和等.是否有另一种选择或是否需要诉诸javascript来执行此类动画？

使用此代码,我已经能够捕获鼠标滚轮移动并将其应用于水平滚动条而不是垂直默认值.

$('html').bind('mousewheel', function(event, delta) {
   window.parent.scrollBy(-120 * delta, 0);
   return false;
});

有什么方法可以将这个jQuery缓动动画添加到滚动运动中吗？

// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.extend( jQuery.easing, {
   easeInOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) 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;
   }
});

非常感谢你提前!

我想使用自定义功能的自定义应用animationAndroid view(按钮)上的翻译interpolator:

public static float easeOut(float t,float b , float c, float d) {
    if ((t/=d) < (1/2.75f)) {
       return c*(7.5625f*t*t) + b;
    } else if (t < (2/2.75f)) {
       return c*(7.5625f*(t-=(1.5f/2.75f))*t + .75f) + b;
    } else if (t < (2.5/2.75)) {
       return c*(7.5625f*(t-=(2.25f/2.75f))*t + .9375f) + b;
    } else {
       return c*(7.5625f*(t-=(2.625f/2.75f))*t + .984375f) + b;
    }
}

我有一个使用自定义插补器的示例,如下所示:

插值器是:

public class HesitateInterpolator implements Interpolator {
    public HesitateInterpolator() {
    }

    public float getInterpolation(float …

无法将缓动方法应用于Jquery ScrollTo:

$("#scroller").scrollTo(target,1000,{axis:'x',easing:'linear'});

这不会让任何事情变得轻松......我现在开始使用jquery(长时间使用原型)所以这肯定是我的错误.我需要一个缓动插件来实现这一目标吗？这个插件的缓动选项有什么用(如果有的话)？文档不清楚这一点.谢谢.

我正在尝试在TChromeTabs中实现标签的流畅运动.我可以在这里看到缓动公式,但我不是数学家,也不知道如何将其转换为代码.到目前为止,我的尝试让我无处可去.

是否有可用的Easing功能的Delphi实现？

通过velocity.js更改日志,我读到:

... 2)背部,弹跳和弹性缓和已被移除.请改用弹簧物理....

我想知道是否有任何简单的方法来重新创建easeOutBounce使用spring缓动的jQuery动画可用的效果,它接受自定义参数？

默认情况下,您可以使用以下spring缓动:

$('.ball').velocity({ top: ['200px', 'spring']}, { duration: 2000 });

可以通过指定[tension, friction]而不是仅传递缓动关键字来自定义弹簧缓动spring.所以你可以这样做:

$('.ball').velocity({ top: ['200px', [500, 0]]}, { duration: 2000 });

我无法理解使用哪种摩擦力和张力值来实现easeOutBounce缓和.我试图让球在达到200px时反弹 - 但它反而是一个"松散"的弹簧,低于地线而不是弹跳.

这是否可以通过velocity.js以简单的方式完成,所以我不需要自己实现自定义缓动函数？

$('button').on('click', function(){
   $('.ball').css('top', '120px');
   $('.ball').velocity({ top: ['200px', [500, 0]]}, { duration: 2000 });
});

.display {
  width: 240px;
  height: 280px;
  position: relative;
  border: 1px solid #000;
}
.ball {
  position: absolute;
  top: 120px;
  left: 40px;
  width: …