使用Raphael在mouseover上缩放一个圆圈

时间:2012-05-03 12:15:10

标签: javascript jquery raphael

你可以帮助我吗?

我正在使用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); 
});

谢谢, 龙树

1 个答案:

答案 0 :(得分:0)

您是否尝试过使用内置的缓动修改器?

我没有测试下面的内容,但也许它有效。我添加了“弹性”作为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'); 
});