jQuery уравнение упругого ослабления - PullRequest
Новая
       31

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

16 голосов
/ 25 марта 2011

Как я могу изменить эту функцию замедления 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.Если кто-то может показать мне пример, я был бы очень признателен.

ОБНОВЛЕНИЕ

Это уравнение очень близко: 

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

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

Ответы [ 3 ]

14 голосов
/ 31 марта 2011

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/

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

3 голосов
/ 31 марта 2011

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

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

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

2 голосов
/ 13 января 2012

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

Линейная анимация для 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);

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

...