Geek Answers Handbook

How to convert cubic bezier value to custom mina easing (snap.svg)

I am trying to create a custom snap.svg animation attenuation. I looked at the documentation ( http://snapsvg.io/docs/#mina ), but it’s not clear to me how I could convert the CSS3 bezier cube style (for example: cubic bezier (0,17, 0,67, 0, 25, 0.99)) before user attenuation using Snap.svg

+4
source share
1 answer

I think you will first need the cubic bezier function, then it is relatively simple to enable it. (Note, I do not pretend to understand any of the cubic code, just trying to highlight how to use it, I also do not know how good the example is).

I'm not sure that I am really allowed to post some kind of elses code here, and it makes sense to refer to git if it is updated, so I have included the link and show mainly how you will use it here.

Jsfiddle example

Github code I use as an example here Read the document on how best to use it.

Define the function of cubic bezier ... (code is here at the 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 two lines, we enable the user attenuation function in the animation call.

+6

More articles:


All Articles