0

I can see that there are multiple people asking questions like this. But there is no clear answer. I've yet to find any solutions that are easily workable and that might be because I'm asking a much more difficult question then I think I am.

I'm using the jQuery UI bounce easing effect when animating to have an object(s) drop into the screen and then I'd like it to bounce only twice as if it's a heavy object and not very bouncy. Does any one know how to do this? Here is the Bounce function as it is natively in the UI, Any ideas on what variables to change and coordinate together? I've tried to figure it out on my own, but my ablities in this type of function and math logic are lacking.

Native Bounce function:

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 );
},

I've found other bounce functions like:

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) );
    }
}

In both functions I know that "p" in it's most basic form is a percentage of how far away from your target you are.

Does anyone have any ideas?

I've also found this:

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

Which works really great if you wanted to add a whole bunch of extra code, and I've even figured out how to get the bounce I want out of it, but I'd rather make a custom easing that allows me to accomplish my goals. Than rewrite the bounce-function above with a whole bunch of extraneous code.

Thanks to anyone who has a solution.

1derboy1
  • 11
  • 2

1 Answers1

4

As you can see from the source code you've already provided, bounce ease functions are just a group of n discontinuous functions along the domain 0 to 1, where n is the number of bounces you want. All you need to do is design these functions so that their y=1 intercepts all touch each other, and manipulate their maxima/apexes to imitate a nicely decaying bounce.

To do this you need to know how to shift a function, how to flip a function, and how to scale/stretch a function. Read over this webpage: Manipulating Graphs.

Recall that we can write out polynomial functions in factored form in order to easily assign what their roots (y=0 intercepts) will be. Let's work with quadratics to keep things simple. So for example a function will be of the form: f(x) = scalar * (x-root1)(x-root2) + constant. Since we want the bounce to occur at y=1 rather than y=0, we add a constant value of 1 to all our functions. In order to make our bounce functions have their y=1 intercepts line up, you have to feed the right-most y=1 intercept of one function into the next. Let's say we want four bounces. Our equations would look like

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

Once you have set up this system of equations, it is just a matter of tuning the locations of your y=1 intercepts (r0 through r3), and your scalars (a1 through a4) to give the desired spacing and amplitudes of your bounces. Here is an example I made in the Apple utility Grapher. I highly suggest you plug these equations into a similar graphing program or calculator and play with the values (if only for the fact that you can come up with a smoother looking system of bounces. You likely want to recreate this shape).

Example bounce graph

So I would imagine your code might be something like

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

Where f1, f2, ..., fn are your functions (but multiply things out as much as possible, consolidate constants, etc) and r1, r2, ..., rn are the y=1 intercepts of your functions.

NOTE: This is a simplified solution, as we assume that we only want quadraticly smooth easing. You could use higher order functions, e.g. a quartic, but for now I think it is easier if you only have to worry about two roots for each function.

Ben P
  • 129
  • 9