Question

我正在使用Raphael.js在悬停时为SVG圆的半径设置动画。我喜欢图书馆提供的库存elastic效果，但是我想增加幅度 - 即，当它徘徊时，让圈子变得更加有趣 - 不是有额外的速度，而是增长效果越大，收缩越小。

我复制了elastic函数并将其重命名为super_elastic，并在此处进行了修补：

我不知道这个函数是如何工作的，所以我只是修补它的数值来看看会发生什么。到目前为止，我还没有找到任何似乎可以做我想要的东西。任何人都可以推荐对我正在寻找的功能（或完全不同的功能）进行任何修改吗？

谢谢！

更新

感谢您的回复！对不起，我可能没解释过这个。我猜这句话“越来越大，缩小”这一说法特别具有误导性。

我知道动画运行后r属性会影响圆的最终半径;不过，我要做的是让elastic动画以更大的幅度“反弹”。也就是说，虽然动画仍然会以我为圆圈设置的r值开始和结束，但我希望elastic转换更具戏剧性 - 扩展和收缩在到达最终的r值之前，过渡期间圈子更加积极。为此，我假设我需要修改elastic函数中使用的等式，以使效果更具戏剧性。

希望这是有道理的 - 如果没有示例，很难解释，但如果我有一个例子，我就不需要发布这个问题了。 ; - ）

Answer 1

好的，根据您的澄清，这是一个新的答案。要扩展缓动（放大）的效果，您需要将缓动结果乘以这样的乘数。

return 6 * Math.pow(2, -10 * n) * Math.sin((n - .075) * (2 * Math.PI) / .3) + 1;

但是，当你这样做时，你会发现大部分放大过快。小部分变慢，大部分变速。因此，更大的速度需要改变。我的猜测（似乎有效）是将Math.sin()更改为Math.cos()，因为这会改变阶段，看起来像你在这里看到的那样有效：http://jsfiddle.net/jfriend00/fuaNp/39/。

return 6 * Math.pow(2, -10 * n) * Math.cos((n - .075) * (2 * Math.PI) / .3) + 1;

有关此缓动功能的其他事项。这部分：

(2 * Math.PI) / .3

确定有多少跳出周期。乘数越大，它的弹跳就越多（但弹跳的速度越快）。乘数越小，它的反弹次数就越少（反弹速度就越慢）。

这部分：

Math.pow(2, -10 * n)

确定反弹衰减的速度，因为该值越大，n越大，n越大，否则其他乘数越大。所以：

Math.pow(2, -5 * n)

使其衰减得更慢（你会看到更多较大的波动在开始时，较少的波动在最后。

Answer 2

当您将鼠标悬停在圆上时，要使圆圈变大，您可以在此处将我已经上升的悬停半径更改为r: 100。要使圆更小，可以将初始大小和未覆盖的大小从25更改为更小的值，如下所示：

var paper = Raphael(0, 0, 300, 300),
    circle = paper.circle(150, 150, 10);   // <== change initial radius here to make it smaller

circle.attr({
  'stroke': '#f00',
  'stroke-width': 4,
  'fill': '#fff'
});
circle.hover(function() {
  this.animate({ r: 100 }, 1000, 'super_elastic');   // <== change enlarged size here
}, function() {
  this.animate({ r: 10 }, 1000, 'super_elastic');    // <== change small size here
});

// no changes made to the easing function
Raphael.easing_formulas.super_elastic = function(n) {
  if (n == !!n) {
    return n;
  }
  return Math.pow(2, -10 * n) * Math.sin((n - .075) * (2 * Math.PI) / .3) + 1;
};

您可以在此处查看：http://jsfiddle.net/jfriend00/fuaNp/。

super_elastic()函数是缓动函数，它控制动画在循环的不同部分移动的速度。缓和不控制整体振幅。这是使用animate()方法的参数完成的。

如果你想减慢动画的速度，你会增加动画的时间（让1000的两个animate()参数为更大的数字。如果你想加速动画，你使这两个数字变小。这些是动画的毫秒数。较小的数字意味着动画以较短的毫秒运行（这意味着更快）。

如何增加此弹性动画效果的幅度？

2 个答案: