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

我正在使用悬停设置SVG圆半径的动画。我喜欢库提供的stock

elastic

效果，但我想增加振幅-即，使圆圈在悬停时以更大的热情增长和收缩-不是以额外的速度，而是在效果运行时变大和收缩

我复制了

elastic

函数并将其重命名为

super\u elastic

，并在这里对其进行了修补：

我不知道这个函数是如何工作的，所以我只是在修改它的数值，看看会发生什么。到目前为止，我还没有找到任何似乎符合我要求的东西。有谁能推荐对函数（或完全不同的函数）进行任何修改，以满足我的要求吗

谢谢

---

更新：

谢谢你的回复！对不起，我可能解释得不太清楚。我猜“变大变小”的说法尤其具有误导性

我知道

r

属性会影响动画运行后圆的最终半径；不过，我想做的是使

动画有弹性

以更大的幅度“反弹”。也就是说，虽然动画仍将以我为圆设置的相同的

r

值开始和结束，但我希望

elastic

过渡更具戏剧性-在过渡期间，在到达最终的

r

值之前，更积极地扩展和收缩圆。要做到这一点，我假设我需要修改

elastic

函数中使用的等式，以使效果更加生动

---

希望这是有道理的——不举一个例子就很难解释，但如果我有一个例子，我就不需要发布这个问题了

要使圆在悬停时变大，请更改悬停半径，我在此处将其增加到

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;
};

var paper=Raphael（0,0,300,300），
圆圈=纸张。圆圈（150、150、10）；// 要使圆在悬停时变大，请更改悬停半径，我在此处将其增加到
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;
};

var paper=Raphael（0,0,300,300），
圆圈=纸张。圆圈（150、150、10）；// 好的，根据你的澄清，这里有一个新的答案。要扩展缓和（放大）效果，需要将缓和结果与类似的乘数相乘

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

但是，当你这样做的时候，你会发现大部分的放大速度太快了。小部分变慢，大部分变快。因此，需要改变更大的速度。我的猜测（似乎有效）是将
Math.sin（）
更改为
Math.cos（）
，因为这改变了阶段，并且似乎有效，正如您在这里看到的：

关于此缓解功能，需要了解的其他事项。本部分：

(2 * Math.PI) / .3

Math.pow(2, -10 * n)

确定有多少个反弹周期。乘数越大，反弹次数就越多（但反弹速度越快）。乘法器越小，反弹越少（反弹越慢）

本部分：

(2 * Math.PI) / .3

Math.pow(2, -10 * n)

确定反弹衰减的速度，因为该值越小，n越大，当n越大时，其他乘法器将被抵消。因此：

Math.pow(2, -5 * n)

使其衰减变慢（你在开始时看到更多较大的摆动，在结束时看到较少较小的摆动。
好的，根据你的澄清，这里有一个新的答案。要扩大缓和（放大）的效果，你需要将缓和结果乘以这样的乘数

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

但是，当你这样做的时候，你会发现放大的大部分太快了。小部分变慢，大部分变快。因此，放大的速度需要改变。我的猜测（似乎可行）是将
Math.sin（）
改为
Math.cos（）
，因为这改变了阶段，正如您在这里看到的那样，它似乎起了作用：

关于此缓解功能，需要了解的其他事项。本部分：

(2 * Math.PI) / .3

Math.pow(2, -10 * n)

确定有多少个反弹周期。倍增器越大，反弹次数越多（但反弹速度越快）。倍增器越小，反弹次数越少（反弹速度越慢）

本部分：

(2 * Math.PI) / .3

Math.pow(2, -10 * n)

确定反弹衰减的速度，因为该值越小，n越大，则当n越大时，会抵消其他乘数。因此：

Math.pow(2, -5 * n)

使它腐烂得更慢（你在开始时看到更多较大的摆动，在结束时看到较少较小的摆动。
谢谢你的回复！请查看我上面的更新以获得澄清。谢谢你的回复！请查看我上面的更新以获得澄清。太完美了！正是我所寻找的，我非常感谢你的透彻解释-基于此，我我能稍微调整一下以得到我想要的效果。非常感谢。新年快乐！太完美了！这正是我想要的，我真的很感谢你的透彻解释-基于此，我能稍微调整一下以得到我想要的效果。非常感谢。新年快乐！