Javascript 在Raphael.js中设置光晕动画
我试图在raphael.js中实现脉动辉光效果。这是我的密码我很抱歉我的大脑太大了 我尝试了设置辉光效果的宽度和不透明度的动画,但两者似乎都不受动画的影响。(辉光是静态的。我通过隐藏大脑元素、放大并检查辉光元素来检查它,但根本没有任何动作。) 我尝试使用相同的步骤为一个单独的(非发光)元素设置动画,多个属性确实可以很好地设置动画Javascript 在Raphael.js中设置光晕动画,javascript,raphael,Javascript,Raphael,我试图在raphael.js中实现脉动辉光效果。这是我的密码我很抱歉我的大脑太大了 我尝试了设置辉光效果的宽度和不透明度的动画,但两者似乎都不受动画的影响。(辉光是静态的。我通过隐藏大脑元素、放大并检查辉光元素来检查它,但根本没有任何动作。) 我尝试使用相同的步骤为一个单独的(非发光)元素设置动画,多个属性确实可以很好地设置动画 谢谢 无法设置辉光的宽度或颜色属性的动画。辉光是通过向一组具有零填充的路径添加笔划来创建的。如果要更改光晕的颜色或宽度,必须设置笔划或笔划宽度属性的动画 错误:(引自
谢谢 无法设置辉光的宽度或颜色属性的动画。辉光是通过向一组具有零填充的路径添加笔划来创建的。如果要更改光晕的颜色或宽度,必须设置笔划或笔划宽度属性的动画 错误:(引自您的消息来源): 稍微正确一点:
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);
};
elproto.glow=函数(glow){
如果(this.type==“text”){
返回null;
}
辉光=辉光|{};
变量s={
宽度:(glow.width | | | 10)+(+this.attr(“笔划宽度”)| | 1),
填充:glow.fill | | false,
不透明度:glow.opacity | |.5,
offsetx:glow.offsetx | | 0,
offsety:glow.offsety | | 0,
颜色:glow.color | |“#000”
},
c=s.宽度/2,
r=这张纸,
out=r.set(),
path=this.realPath | | getPath[this.type](this);
path=this.matrix?mapPath(path,this.matrix):path;
对于(变量i=1;i
因此,如果您只是固定所有这些路径的笔划宽度,它将消除辉光效果,如您在示例中所看到的。对于这个问题,没有一个简单的答案。您可以使用setInterval来删除旧光晕并添加具有新宽度的新光晕,但这听起来不是一种非常有效的方法。您无法设置光晕的宽度或颜色属性的动画。辉光是通过向一组具有零填充的路径添加笔划来创建的。如果要更改光晕的颜色或宽度,必须设置笔划或笔划宽度属性的动画 错误:(引自您的消息来源): 稍微正确一点:
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);
};
elproto.glow=函数(glow){
如果(this.type==“text”){
返回null;
}
辉光=辉光|{};
变量s={
宽度:(glow.width | | | 10)+(+this.attr(“笔划宽度”)| | 1),
填充:glow.fill | | false,
不透明度:glow.opacity | |.5,
offsetx:glow.offsetx | | 0,
offsety:glow.offsety | | 0,
颜色:glow.color | |“#000”
},
c=s.宽度/2,
r=这张纸,
out=r.set(),
path=this.realPath | | getPath[this.type](this);
path=this.matrix?mapPath(path,this.matrix):path;
对于(变量i=1;i
因此,如果您只是固定所有这些路径的笔划宽度,它将消除辉光效果,如您在示例中所看到的。对于这个问题,没有一个简单的答案。您可以使用setInterval来移除旧光晕并添加一个具有新宽度的新光晕,但这听起来不是一个非常有效的方法。我已经能够通过添加以下内容来纠正这个问题,而不存在JSFIDLE演示中所示的计时问题
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;
};
elproto.resume=函数(动画){
对于(var i=0;i
我已经能够在没有时间问题的情况下纠正这个问题,如您的JSFIDLE演示中所示,通过添加以下内容来恢复
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;
};
elproto.resume=函数(动画){
对于(var i=0;i
@ShawnChin谢谢,我从维基百科上取了一个Creative Commons SVG大脑并清理了一点。@ShawnChin谢谢,我从维基百科上取了一个Creative Commons SVG大脑并清理了一点。谢谢Ben,我将在几个小时内对此进行测试,如果它看起来像pulsey,我会接受这个答案:)嘿Ben,我试图在不编辑拉斐尔资料的情况下测试这一点。我可以覆盖对象的原型吗