Функция ослабления отказов пользовательского интерфейса Jquery позволяет уменьшить отказов и / или контролировать количество отказов

Question

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

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

Родная функция отказов:

Bounce: function ( p ) {
        var pow2,
         bounce = 4;

     while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {}
    return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 );
},

Я нашел другие функции отказов, такие как:

for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
    if (p >= (7 - 4 * a) / 11) {
        return (-Math.pow((11 - 6 * a - 11 * p) / 4, 2) + Math.pow(b, 2) );
    }
}

В обеих функциях я знаю, что буква "p" в ее основной форме - это процент того, насколько далеко вы находитесь от цели.

У кого-нибудь есть какие-либо идеи?

Я также нашел это:

https://github.com/clark-pan/Bounce-Function

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

Спасибо всем, у кого есть решение.

Answer 1

Как вы можете видеть из исходного кода, который вы уже предоставили, функции bounce easy - это просто группа n прерывистые функции вдоль области от 0 до 1, где n - это количество отказов, которое вы хотите. Все, что вам нужно сделать, это спроектировать эти функции так, чтобы их y=1 перехватывали все касания друг друга и манипулировали их максимумами / апексами, чтобы имитировать хорошо затухающий отскок.

Для этого вам нужно знать, как сдвигать функцию, как переворачивать функцию и как масштабировать / растягивать функцию. Прочтите на этой веб-странице: Управление графиками.

Напомним, что мы можем выписать полиномиальные функции в факторизованном виде, чтобы легко назначить, какими будут их корни (y=0 перехватывает). Давайте работать с квадратиками, чтобы все было просто. Так, например, функция будет иметь вид: f(x) = scalar * (x-root1)(x-root2) + constant, Поскольку мы хотим, чтобы отскок происходил при y=1, а не y=0, мы добавляем постоянное значение 1 для всех наших функций. Для того, чтобы у наших bounce-функций была линия пересечений y=1, вы должны передать самый правый y=1 перехват одной функции в следующую. Допустим, мы хотим четыре отскока. Наши уравнения будут выглядеть так

f1(x)=a1(x+r0)(x-r1)+1 // Note: make r0 = r1 to center function's maxima at x=0
f2(x)=a2(x-r1)(x-r2)+1
f3(x)=a3(x-r2)(x-r3)+1
f4(x)=a4(x-r3)(x-1) +1 // r4 = 1 because bounce ends at x=1

После того, как вы настроили эту систему уравнений, нужно просто настроить местоположения ваших пересечений y=1 (от r0 до r3) и ваших скаляров (от a1 до a4), чтобы получить желаемый интервал и амплитуды ваших отскоков. Вот пример, который я сделал в утилите Apple Grapher. Я настоятельно рекомендую вам включить эти уравнения в аналогичную графическую программу или калькулятор и поиграть со значениями (хотя бы потому, что вы можете придумать более плавную систему отказов. Возможно, вы захотите воссоздать эту форму).

Так что я думаю, что ваш код может быть что-то вроде

bounce(x):
    x = clamp(x,0,1)
    if x >= 0 and x < r1 then
        return f1(x)
    elseif x >= r2 and x < r3 then
        return f2(x)
    ... 
    else
        return fn(x)
    end

Где f1, f2, ..., fn - ваши функции (но, по возможности, умножьте все, объедините константы и т. Д.), А r1, r2, ..., rn - это пересечения y=1 ваших функций.

ПРИМЕЧАНИЕ. Это упрощенное решение, так как мы предполагаем, что нам нужно только квадратично плавное ослабление. Вы можете использовать функции более высокого порядка, например, квартику, но сейчас я думаю, что проще, если вам нужно беспокоиться только о двух корнях для каждой функции.