Bug Tracker

Opened 9 years ago

Closed 9 years ago

Last modified 8 years ago

#7375 closed enhancement (plugin)

Allow custom easing functions with animate

Reported by: janne.aukia@… Owned by:
Priority: undecided Milestone:
Component: effects Version: 1.4.3
Keywords: needsreview Cc:
Blocked by: Blocking:

Description

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.

Change History (4)

comment:1 Changed 9 years ago by Rick Waldron

Component: unfiledeffects
Keywords: needsreview added
Milestone: 1.5
Status: newopen

comment:2 Changed 9 years ago by 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...

comment:3 Changed 9 years ago by john

Resolution: plugin
Status: openclosed

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

comment:4 in reply to:  3 Changed 8 years ago by mail@…

Note: See TracTickets for help on using tickets.