在Raphael.js中設置動畫效果

我試圖在raphael.js中實現脈動的發光效果。這裏是我的代碼http://jsfiddle.net/eaPSC/我對這個龐大的大腦感到非常抱歉。 ;）在Raphael.js中設置動畫效果

我試着對發光效果和不透明度的寬度進行動畫處理，而且看起來都不受動畫的影響。（發光是靜止的，我通過隱藏大腦元素來檢查它，放大並檢查發光元素，並且根本沒有動作。）

我試着用單獨的（非發光）元素動畫相同的程序和多個屬性的動畫很好。

謝謝！

來源

2012-03-22 rdrey

太棒了！。 – 2012-07-24 15:30:15

@ShawnChin謝謝，我從維基百科獲得了Creative-Commons SVG大腦，並對它進行了一些清理。 – rdrey 2012-07-25 07:27:29

不能爲輝光的寬度或顏色屬性設置動畫。發光是通過向具有零填充的一組路徑添加筆畫創建的。如果您想更改發光的顏色或寬度，則必須爲筆畫或筆觸寬度屬性設置動畫。

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來刪除舊的輝光並添加一個新的寬度，但它聽起來不是一個非常有效的方法。

來源

2012-03-25 20:26:20

我已經能夠解決這個問題，沒有時間問題，如您的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; 
};

來源

2012-07-24 15:18:02

感謝本，將在幾個小時內測試這個，並接受這個答案，如果它看起來像脈衝:) – rdrey 2012-07-25 07:27:36

嘿本，我試圖測試這個沒有編輯raphael源。我可以改寫我的對象原型嗎？它會是大腦，動畫還是輝光的原型？ – rdrey 2012-07-25 18:45:48

在Raphael.js中設置動畫效果

回答

相關問題