animation - 如何将三次贝塞尔值转换为自定义 mina 缓动 (snap.svg)

Question

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

Answer 1

我认为您首先需要一个三次贝塞尔函数，然后它的包含相对简单。 (注意我不会假装理解任何三次代码，只是想强调如何使用它，我也不知道这个例子有多好)。

我不确定我是否真的可以在这里发布其他人的代码，如果它更新，引用 git 是有意义的，所以我包含了链接，并主要展示了你将如何在此处使用它。

示例 jsfiddle

我在示例中使用的 Github 代码 here阅读那里的文档，了解如何最好地使用它。

定义您的三次贝塞尔函数...(此处的代码来自上面的链接)

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

正如您在最后两行中看到的，我们在 animate 调用中包含了自定义缓动函数。