在Raphael.js上提高酒吧动画效果

Question

如何让动画走向正确？我的意思是我想让酒吧提高。但是现在右边的底点并不像左边那样保持静态。它由动画从左到右。

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

该线从左下方未来的原因是因为有在第二所述第一路径和5 3分。要创建动画，额外的点将被赋予第一个点的默认起点。 （100,500）。

注意：另请看attr函数。您可以将包含所有您想要的属性的JSON对象传递给它，而不是多次调用attr。

$(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