我正在寻找一种最简单、更直接的方法来制作某个元素的循环/重复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/