javascript - 使用 Raphael 在鼠标悬停时缩放一个圆圈

Question

你能帮我解决这个问题吗？

我正在使用 Raphael 绘制一个圆圈。在鼠标悬停时，圆圈应该放大和缩小（缩放）。

我可以轻松地增加圆圈的大小，但我想要在增加圆圈大小之间产生一些效果。它应该像弹性一样增加。

我想用 Raphel 开发那个动画。你能帮我么

这是我写的代码：

smallCircles[0].hover(function () { 
    smallCircles[0].animate({ fill: 'rgb(231,88,88)', opacity: 0.95, r: 55,r:45,r:55, 'stroke-width': 0 }, 100); 
  },
  function () { 
    smallCircles[0].animate({ fill: 'rgb(240,153,153)', opacity: 0.8, r: 35, 'stroke-width': 0 }, 300); 
});

谢谢，龙树菩萨

Answer 1

您是否尝试过使用内置的缓动修饰符？

我没有测试过下面的，但也许它有效。我添加了“弹性”作为该方法的easing参数animate

smallCircles[0].hover(function () { 
    smallCircles[0].animate({ fill: 'rgb(231,88,88)', opacity: 0.95, r: 55,r:45,r:55, 'stroke-width': 0 }, 100, 'elastic'); 
  },
  function () { 
     smallCircles[0].animate({ fill: 'rgb(240,153,153)', opacity: 0.8, r: 35, 'stroke-width': 0 }, 300, 'elastic'); 
});