Allow custom easing functions with animate

[janne.aukia@…]

I would like to make a jQuery plugin which would allow using cubic easing in the same way as in CSS3 transformations. As far as I know, this is currently not possible, since currently all easings need to be named functions under jquery.easing and they cannot take extra parameters.

What I would like to have would be something like the following:

function constructCubicEasing(p1x,p1y,p2x,p2y) {
    return function( p, n, firstNum, diff ) {
        // here setup the actual easing func based on p1x...p2y
    };
}

$(".block").animate({"left": "0px"}, constructCubicEasing(0.42,0.0,0.58,1.0));

So instead of passing named arguments for easing functions (such as "swing" or "linear") one could pass an actual function.

Another alternative would be to have a way to pass parameters to the easing function, something like:

jquery.easing.cubic = function(p, n, firstNum, diff, extraParams) {
    // here setup the actual easing func based on p1x...p2y in extraParams
}

$(".block").animate({"left": "0px"}, "cubic", null, {p1x:0.42,p1y:0.0,p2x:0.58,p2y:1.0});

The motivation behind these is that designers often want to tweak easing parameters to please their tastes, and for them, having some config params would be nice.

[gnarf]

One thing to note... The "standard" fx calls to easing functions ALWAYS use firstNum = 0, diff = 1 - p is the actual "percent" and n is a number of milliseconds...

[john]

I would be inclined to do something like this:

(function(){
  var num = 1;

  this.constructCubicEasing = function(p1x,p1y,p2x,p2y) {
    var name = "cubic" + num;

    jQuery.easing[ name ] = function( p, n, firstNum, diff ) {
        // here setup the actual easing func based on p1x...p2y
    };

    num++;

    return name;
  };
})();

Then you could just do:

$(".block").animate({"left": "0px"}, constructCubicEasing(0.42,0.0,0.58,1.0));

[mail@…]

Done!

​http://github.com/rdallasgray/bez