Question

在快照svg文档中，所有mina。* easings都有一个参数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

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

调用动画时，会将缓动函数作为参数传递。该函数将获取一个参数'当它被调用时'（即不是它被传递时），这将是0-1之间的插值数，其中动画是沿着它的持续时间。所以在动画开始时它将是0，然后是0.01，然后是结束1.函数决定结果如何变化，并根据当前输入值返回当前反弹的值（如何远在动画中它是0-1）。

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

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

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

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

1 个答案: