在 Raphael.js 上提升条形动画

【问题标题】：Raising up bar animation on Raphael.js在 Raphael.js 上提升条形动画
【发布时间】：2016-07-19 16:26:32
【问题描述】：

如何让动画顺利进行？我的意思是我想让酒吧提高。但是现在右下点不像左点那样保持静止。它通过动画从左到右移动。

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

【问题讨论】：

标签： javascript charts raphael bar-chart

【解决方案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

【讨论】：