我正在尝试在raphael.js中实现脉动发光效果。这是我的代码http://jsfiddle.net/eaPSC/我非常抱歉大脑。 ;)
我尝试动画效果和不透明度的宽度,但似乎都不受动画的影响。 (发光是静止的。我通过隐藏大脑元素,放大并检查发光元素来检查它,并且根本就没有动作。)
我尝试使用相同的程序为单独的(非发光)元素设置动画,并且多个属性的动画效果很好。
谢谢!
答案 0 :(得分:5)
您无法为发光的宽度或颜色属性设置动画。通过向具有零填充的一组路径添加笔划来创建发光。如果要更改发光的颜色或宽度,则必须为笔触或笔触宽度属性设置动画。
错误:(引自您的来源):
anim = Raphael.animation({
width: 15,
opeacity: 1
}, 500);
稍微更正确
anim = Raphael.animation({
"stroke-width": 15,
opacity: 1
}, 500);
但是你会注意到这会消除渐变发光效果。如果您实际查看glow()的源代码,您可以看到最终的for循环创建了一组分层路径来创建渐变效果。
elproto.glow = function (glow) {
if (this.type == "text") {
return null;
}
glow = glow || {};
var s = {
width: (glow.width || 10) + (+this.attr("stroke-width") || 1),
fill: glow.fill || false,
opacity: glow.opacity || .5,
offsetx: glow.offsetx || 0,
offsety: glow.offsety || 0,
color: glow.color || "#000"
},
c = s.width / 2,
r = this.paper,
out = r.set(),
path = this.realPath || getPath[this.type](this);
path = this.matrix ? mapPath(path, this.matrix) : path;
for (var i = 1; i < c + 1; i++) {
out.push(r.path(path).attr({
stroke: s.color,
fill: s.fill ? s.color : "none",
"stroke-linejoin": "round",
"stroke-linecap": "round",
"stroke-width": +(s.width / c * i).toFixed(3),
opacity: +(s.opacity / c).toFixed(3)
}));
}
return out.insertBefore(this).translate(s.offsetx, s.offsety);
};
因此,如果您只修复所有这些路径的笔触宽度,它会杀死光晕效果,如示例中所示。对此没有一个简单的答案。您可以使用setInterval自行设置动画来移除旧的光晕并添加一个具有新宽度的新光晕,但它听起来不是一个非常有效的方法。
答案 1 :(得分:1)
我已经能够在没有时间问题的情况下纠正这个问题,如你的jsfiddle演示中所示,通过添加以下内容来恢复。
elproto.resume = function (anim) {
for (var i = 0; i < animationElements.length; i++) if (animationElements[i].el.id == this.id && (!anim || animationElements[i].anim == anim)) {
var e = animationElements[i];
if (eve("raphael.anim.resume." + this.id, this, e.anim) !== false) {
delete e.paused;
this.status(e.anim, e.status,**e.totalOrigin**);
}
}
return this;
};