如何将立方贝塞尔曲线值转换为自定义mina缓动(snap.svg)

Question

我正在尝试为snap.svg动画创建自定义缓动.我查看了文档(http://snapsvg.io/docs/#mina),但我不清楚如何转换CSS3样式的cubic-bezier(例如:cubic-bezier(0.17,0.67,0.25, 0.99))使用Snap.svg自定义缓动

Answer 1

我认为你首先需要一个立方贝塞尔函数,然后它包含相对简单.(注意我不假装理解任何立方代码,只是试图强调如何使用它,我也不知道这个例子有多好).

我不确定我是否允许在这里真正发布别人的代码,并且在更新的情况下引用git是有意义的,所以我已经包含了链接,并且主要显示了如何在这里使用它.

示例jsfiddle

我在这里使用的Github代码阅读有关如何最好地使用它的文档.

定义你的cubic-bezier函数...(代码来自上面的链接)

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

正如您在最后两行中所看到的,我们在动画调用中包含自定义缓动函数.