snap.svg mina easing 参数不起作用答案

【问题标题】：snap.svg mina easing parameter not workingsnap.svg mina easing 参数不起作用
【发布时间】：2015-09-19 16:03:52
【问题描述】：

在 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>

谢谢！

【问题讨论】：

标签： snap.svg

【解决方案1】：

这并不像你想象的那样工作。

当您调用动画时，您将缓动函数作为参数传递。该函数将采用一个参数“当它被调用时”（即不是当它通过时），它将是动画沿其持续时间的 0-1 之间的插值数。所以在动画开始时它将是 0，然后是 0.01，最后是 1。该函数指示结果将如何变化，并将根据当前输入值返回当前反弹的值（如何在整个动画中它是 0-1)。

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

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

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

【讨论】：