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

Simplest way to create pulsating (looping) background in Raphael JS?

本文关键字：背景 最简单 方法 循环 JS Raphael 创建 脉动      更新时间：2024-02-25

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

例如，如果我有一个圆圈：

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

上面的代码运行得很好，但它只对过渡设置了一次动画，只要我在圆圈上悬停，我就想制作一个重复的循环。

当我把光标放在圆圈上时，我想循环背景从填充到填充悬停，直到我用光标离开。

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

您可以向动画添加一个回调，以重新启动它：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/

相关文章：