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代码作为示例here阅读有关如何最好地使用它的文档。

定义你的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 );

正如您在最后两行中所看到的，我们在动画调用中包含了自定义缓动功能。

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

1 个答案: