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
-
Do you have a function already that could work, just wondering if its the function itself, or the conversion to a custom easing function, or both. If you have one already, it may be worth posting to have a fiddle with.– IanAug 12, 2014 at 15:29
-
No, i don't have a function. I don't understand the parameters mina expects... what are "slave" numbers?– arrowAug 12, 2014 at 15:46
-
I don't think you need to worry about those. I think typically most Snap easings just seem to take a value of 0..1 which is whereabouts it is through its animation (I think). So I was wondering if a function which took n and then the cubics parameters would be possible.– IanAug 12, 2014 at 15:52
1 Answer
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.
-
Works thanks, just missing a } after } // end of cubic-bezier function, see code on github link– TeT PsyJul 19, 2016 at 11:41