snap.svg mina 缓动参数不起作用

Question

在 snap svg 文档中，所有 mina.* 缓动都有一个可用的参数 n (ie bounce)，但是当传递除零以外的任何内容时它会出错，而传递零基本上会消除缓动效果。我希望如果通过零将其删除，此参数会影响缓动的强度，但也许零只是作为它的假？我错过了什么吗？

下面是一个例子：

/* Timeouts are set just to show all three running */

var s = Snap("#svg");


var rect = s.rect(10, 10, 100, 100);

//Works without parameter

rect.animate({
    x: 50,
    y: 50
}, 800, mina.bounce)


setTimeout(function(){
  
//  
//Works with parameter as 0
//
rect.animate({
    x: 0,
    y: 0
}, 800, mina.bounce(0));
  
  
},1000)


setTimeout(function(){
  
//
// Doesnt Work 
//
rect.animate({
    x: 50,
    y: 50
}, 800, mina.bounce(1));
  
  
},2000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>

<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

谢谢！

Answer 1

这并不像你想象的那样有效。

当您调用动画时，您将缓动函数作为参数传递。该函数将采用一个参数 'when its called'（即不是在它通过时），它将是动画在其持续时间内的 0-1 之间的插值数。所以在动画开始时它将是 0，然后是 0.01，然后在结束时是 1。该函数决定了结果将如何变化，并且 return 当前反弹的值取决于当前输入值（0-1 通过动画的距离）。

在您的示例中，您不再传递函数 mina.bounce，而是传递函数 mina.bounce(0) 的结果（这是一个数字，而不是函数） , 所以什么都不会发生。

如果您想要不同的缓动效果（除了包含的缓动效果），您需要编写自己的函数并将其作为参数传递给动画（您可以添加第二个参数来指定某些特征，例如强度反弹，然后将其作为绑定传递给函数）。您可以查看 mina.bounce 函数并根据您的需要对其进行定制（您可以复制它并仅更改您在 bounce 函数中看到的几个值，但它们有点繁琐）。

您可以在文件末尾附近看到示例缓动函数 here。

snap.svg mina 缓动参数不起作用

snap.svg mina easing parameter not working

snap.svg