Настройка функции jQuery easeOutElastic - PullRequest
Новая
       40

Настройка функции jQuery easeOutElastic

2 голосов
/ 13 октября 2011

У меня есть веб-сайт с боковой прокруткой под управлением jQuery, с несколькими страницами, разделенными тысячами пикселей по горизонтали. Я использую функцию easeOutElastic, но анимация происходит очень быстро, и упругий отскок необходимо уменьшить. Если я увеличу параметр длительности, анимация замедлится, но отскок также увеличится. Кажется, продолжительность контролирует всю анимацию.

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

easeOutElastic: 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;
}

Может ли кто-нибудь сказать мне, что представляют собой параметры: x, t, b, c, d?

Я предполагаю (отслеживая функцию): 

  t = time // passed from the duration
  d = distance // calculated from the current and move to positions passed from the css

Похоже, что когда t == 0, функция замедления завершена, но мне действительно нужно, чтобы функция возвращалась, когда скорость движения ниже некоторого порога, а не ожидала, когда время истечет. Но где рассчитывается скорость? (с?)

Любая помощь, которую вы можете оказать в расшифровке, была бы великолепна!

Ответы [ 2 ]

3 голосов
/ 13 октября 2011

Может ли кто-нибудь сказать мне, что представляют собой параметры: x, t, b, c, d?

x = null (дополнительный параметр не требуется для уравнений, но необходим дляJQuery)t = текущее времяб = начальное значениес = конечное значениеd = длительность

источник: http://gsgd.co.uk/sandbox/jquery/easing/

где рассчитывается скорость?

«Скорость» определяется как расстояние во времени.Уравнение можно представить в виде кривой.Кривая уже содержит информацию о положении в любой данный момент времени, поэтому скорость - это не параметр, который вы вводите (это выход функции).

Скорость также постоянно меняется ( ускорение определяется какизменение скорости во времени ).Все, что имеет значение для этого уравнения (кривой), это , где и , когда , чтобы положить что-то ... это заканчивается тем, что представляет собой анимированное представление (вывод), содержащее бесконечное число скоростей (или большеточно, "ускорения").

Вы также можете быть заинтересованы в моем ответе здесь ...

jQuery.easing - easeOutCubic - подчеркивая легкость

РЕДАКТИРОВАТЬ:

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

Вам нужно нажать на крошечное изображение, и инструмент откроется во всплывающем окне.

http://laco.wz.cz/tween/?page=customeasing

2 голосов
/ 13 октября 2011

Могу ли я предложить обходной путь? Используйте два анимационных вызова, один для перемещения элемента на большую часть расстояния и один для окончательного эффекта "отскока". Таким образом, вы можете изменить длительность эффекта «отскока», чтобы он выглядел так, как вы хотите, а также иметь горизонтальную прокрутку так быстро, как вы хотите. 

$('#element_id').animate({left : '20px'}, 1000, 'linear', function () {
    $(this).animate({left : '0px'}, 500, 'easeOutElastic');
});
...