0

我正在寻找最简单和更直接的方法来制作某些元素的循环/重复脉动背景。

例如,如果我有一个圆圈:

var filler = {
            'fill': 'white',
            'stroke': 'white',
            'stroke-width': '0'
}
var fillerHover = {
            'fill': '#b6def1',
            'stroke': '#b6def1',
            'stroke-width': '0',
            'cursor': 'pointer'
}

circle.hover(function() {
            circle.animate(fillerHover, 500);
        },

        function() {
            circle.animate(filler, 500);
        }
);

上面的代码运行良好,但是它只为过渡设置一次动画,只要我将鼠标悬停在圆圈上,我就想做一个重复循环。

当我将光标放在从填充到填充悬停的圆圈上时,我想循环背景,直到我带着光标出去。

如何以最简单的方式创建这样的循环?

4

1 回答 1

2

您可以向再次启动它的动画添加回调:http ://raphaeljs.com/reference.html#Element.animate

不要在 a中这样做setInterval,那会提高帧率!
甚至不要使用requestAnimationFrame. 你不知道它什么时候会触发动画。唯一“安全”的方法是让 Raphael 告诉您动画何时结束(通过callback选项)以开始下一个动画。

就像是:

fillerHover.callback = mouseOver;
function mouseOver() {
  circle.animate(fillerHover, 500);
}

circle.hover(
  mouseOver,
  function() {
    circle.animate(filler, 500);
  }
);

将其与您当前的代码混合 =) 您知道我的意思。

编辑:这看起来像:http: //jsfiddle.net/rudiedirkx/j9XyX/6/show/

于 2012-07-24T18:40:55.273 回答