在Raphael.js中为光晕设置动画

Question

我正在尝试在raphael.js中实现一种脉动的发光效果。这是我的代码http://jsfiddle.net/eaPSC/我对巨大的大脑感到非常抱歉。;)

我尝试对发光效果的宽度和不透明度进行动画处理，但两者似乎都没有受到动画的影响。我通过隐藏大脑元素，放大并仅检出发光元素来检查它，但根本没有任何操作。)

我尝试使用相同的过程对单独的(非发光)元素进行动画处理，但多个属性的动画效果确实不错。

谢谢!

Answer 1

不能为发光的宽度或颜色属性设置动画。光晕是通过向一组具有零填充的路径添加描边来创建的。如果要更改发光的颜色或宽度，则必须为笔触或笔触宽度属性设置动画。

http://jsfiddle.net/eaPSC/2/

错误：(引用自您的源码)：

  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来移除旧的光晕并添加一个具有新宽度的新光晕，但这听起来不是一个非常有效的方法。

Answer 2

正如您的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;
};