在Raphael.js上提高条形动画

Question

How to make animation go right? I mean I want to make bar raising up. But now the right bottom point doesn't stay static like the left one. It goes from left to right by animation.

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

The reason the line is coming from the bottom left is because there are 3 points in the first path and 5 in the second. To create the animation the extra points are given a default starting point of the first point. (100, 500).

Note: Also look at the attr function. You can pass a JSON object to it containing all of the attributes you want instead of calling attr multiple times.

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