Raphael.jsのバーアニメーションを上げる

Question

アニメーションを正しく作成するには？私はバーを上げることを意味します。しかし、右下点は左のように静的ではありません。アニメーションでは左から右に向かっています。第二に第一の経路及び5の3点があるので

https://jsfiddle.net/kholmukhamedovme/m4q4Lmbr/

var paper = Raphael("paper", 500, 500); 

var bar = paper.path(
    "M 100, 500" + 
    "L 200, 450" + 
    "L 300, 500" + 
    "Z" 
).animate({ 
    path: 
     "M 100, 350" + 
     "L 200, 300" + 
     "L 300, 350" + 
     "L 300, 500" + 
     "L 100, 500" + 
     "Z" 
}, 1000).attr("fill", "green").attr("stroke", "none"); 

Answer 1

線が左下から来ている理由です。アニメーションを作成するために、余分なポイントには最初のポイントのデフォルトの開始ポイントが与えられます。 （100,500）。

注：attr機能も参照してください。 attrを複数回呼び出すのではなく、必要なすべての属性を含むJSONオブジェクトを渡すことができます。

$(function(){ 

    var paper = Raphael("paper", 500, 500); 

    var bar = paper.path(
    "M 100, 500" + 
    "L 200, 450" + 
    "L 300, 500" + 
    "L 300, 500" + 
    "L 100, 500" + 
    "Z" 
).animate({ 
    path: 
     "M 100, 350" + 
     "L 200, 300" + 
     "L 300, 350" + 
     "L 300, 500" + 
     "L 100, 500" + 
     "Z" 
    }, 500).attr({ 
    fill: "green", 
    stroke: "none" 
    }); 

}); 

JSFiddle