在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

該線從左下角開始的原因是，第一條路徑中有3個點，第二條路徑中有5個點。 要創建動畫，將為附加點指定第一個點的默認起點。 （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