javascript - 如何增加这种弹性动画效果的振幅？

Question

我正在使用 Raphael.js在悬停时为 SVG 圆的半径设置动画。我喜欢库提供的库存 elastic 效果，但我想增加振幅 - 即，使圆圈在悬停时更加热情地增长和收缩 - 而不是额外的速度，但当效果运行时变大和缩小。

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

http://jsfiddle.net/ryWH3/

我不知道这个函数是如何工作的，所以我一直在修改它的数值，看看会发生什么。到目前为止，我还没有发现任何似乎可以做我想做的事情。任何人都可以推荐对函数(或完全不同的函数)的任何修改，以实现我正在寻找的功能吗？

谢谢!

---

更新:

感谢您的回复!对不起，我可能没有很好地解释这一点。我猜“变大变小”这句话尤其具有误导性。

我知道 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)

让它衰减得更慢(你会在开始时看到更多较大的摆动，而在结束时看到较少的较小摆动。