How to convert a cubic bezier value to a custom mi

问题:

I'm trying to create custom easing for a snap.svg animation. I looked at the documentation (http://snapsvg.io/docs/#mina), but it's not clear to me how I could convert a CSS3 style cubic-bezier (for example: cubic-bezier(0.17, 0.67, 0.25, 0.99)) to custom easing with Snap.svg

回答1:

I think you would firstly need a cubic-bezier function, then its relatively simple to include. (Note I don't pretend to understand any of the cubic code, just trying to highlight how to use it, I also don't know how good the example is).

I'm not sure if I'm allowed to post someone elses code on here really, and it makes sense to reference git in case its updated, so I have included the link, and displaying mainly how you would use it here.

Example jsfiddle

Github code I am using for the example here Read the doc there on how best to use it.

Define your cubic-bezier func...(code here from link above)

var cubicBezier = function(x1, y1, x2, y2, epsilon){
    var curveX = function(t){
...
    }
} // end of cubic-bezier function, see code on github link


// Create the specific bezier easing func... 
var duration = 200;
var epsilon = (1000 / 60 / duration) / 4;

var timingFunction = cubicBezier(0.08, 1.05, 0.95, 0.12, epsilon);
var timingFunction2 = cubicBezier(0.5, 0.5, 0.5, 0.5, epsilon );

// Now the Snap stuff 
var paper = Snap(600, 600);

var r =  paper.rect(0,0,200, 200).attr({fill: "blue" });
var r2 = paper.rect(0,200,200,200).attr({ fill: "green" });

r.animate({ x: 200 }, 1000, timingFunction );
r2.animate({ x: 200 }, 1000, timingFunction2 );

As you can see in the last 2 lines, we include the custom easing function in the animate call.