如何将贝塞尔值转换为定制米娜宽松政策（snap.svg） [英] How to convert a cubic bezier value to a custom mina easing (snap.svg)

问题描述

我试图创建自定义放宽对一个snap.svg动画。我看了看文档（ http://snapsvg.io/docs/#mina ），但它的我不清楚我怎么能转换CSS3风格立方贝塞尔（例如：立方贝塞尔（0.17，0.67，0.25，0.99）），以自定义与Snap.svg缓解

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

推荐答案

我想你首先需要一个立方贝塞尔函数，那么它的相对简单的包含。 （请注意，我不pretend了解任何立方code的，只是想强调如何使用它，我也不知道这个例子有多好）。

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

我不知道如果我允许张贴别人code在这里真是的，是有意义的参考混帐的情况下，它的更新，所以我已经包括了链接，主要是显示你将如何这里使用它。

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.

的jsfiddle

Github上code我使用的例子这里有阅读文档如何最好使用它。

Github code I am using for the example here Read the doc there on how best to use it.

定义你的立方贝塞尔FUNC ...（code这里从上面的链接）

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

正如你在最后2行看到的，我们包括自定义的动画调用缓动函数。

As you can see in the last 2 lines, we include the custom easing function in the animate call.

这篇关于如何将贝塞尔值转换为定制米娜宽松政策（snap.svg）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！