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); 

しかし、あなたは、これはgradientedオフに殺すことがわかりますグロー効果。実際に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; 
};