Question

我正在寻找一种最简单，更直接的方法来制作一些元素的循环/重复puslating背景。

E.g。如果我有一个圆圈：

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

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

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

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

Answer 1

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

不要在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/

在Raphael JS中创建脉动（循环）背景的最简单方法？

1 个答案: