Уравнение упругого ослабления jQuery

Как мне изменить эту функцию jQuery easing для получения менее преувеличенного отскока?

$.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 - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

Мне нужен только окончательный отскок без начального отскока.

Ответы

Ответ 1

http://timotheegroleau.com/Flash/experiments/easing_function_generator.htm позволяет визуально создавать функцию ослабления. Если вы переключаете переключатель F5/FMX в верхнем правом углу, он выводит результат на JavaScript.

Не зная точно, какой эффект вы хотите, это должно быть довольно близко.

$.easing.tinyslider = function(x, t, b, c, d) {    
    ts=(t/=d)*t;
    tc=ts*t;
    return b+c*(-8.1525*tc*ts + 28.5075*ts*ts + -35.105*tc + 16*ts + -0.25*t);
}

В противном случае закрутите генератор функций ускорения и попробуйте новые параметры или посмотрите http://commadot.com/jquery/easing.php для получения дополнительных ресурсов.

jsfiddle

http://jsfiddle.net/XRF6J/

Это было интересно ответить, я всегда хотел узнать, как эти облегчающие функции работали.

Ответ 2

Вы пробовали плагин jQuery easing?

Это добавляет много новых облегчений (вы можете попробовать их на сайте).

Если вы можете использовать грациозную деградацию, я предлагаю вам взглянуть на переходы CSS. Его аппаратное ускорение, и вы можете использовать предопределенные или пользовательские (с кривой безье) переходы.

Ответ 3

Я знаю, что это довольно старый, но мне нужно было сделать тот же эффект, и я успешно использовал комбинацию двух функций ослабления в пользовательском интерфейсе.

Линейная анимация для 95% перехода в 95% от времени, затем эластичная анимация по оставшимся 5% в 5% от времени '16 (это просто казалось правильным - много времени анимации для этого эффекта посвящено подпрыгиванию, поэтому оно должно быть значительно длиннее).

d = [transition 'distance' or whatever];
t = [transition time ms]

da = d * 0.95;
db = d * 0.05;

ta = t * 0.95;
tb = (t * 0.05) * 16;

var anima = {left: "+="+da+"px"};
var animb = {left: "+="+db+"px"};

$(element).animate(anima,ta).animate(animb,tb);

Довольно обходной путь, но я не мог создать формулу безье, и я рвал свои волосы, пытаясь.