var Animate = {
  interval: {
    // 出场动画
    appear: function() {
      return clipIn;
    },
    // 是否开启更新动画
    update: true,
    // 退场动画
    out: function() {
      return lineWidthOut;
    }
  }
};

var Animate = G2.Animate;

function barIn(shape){
  var origin = shape.get('origin'); // 原始数据
  var box = shape.getBBBox(); // 包围盒
  var points = origin.points; // 原始数据点集
  var i = origin.index; // 原始数据索引
  var x = box.centerX;
  var y;

  if (points[0].y - points[1].y <= 0) { // 当顶点在零点之下
    y = box.maxY;
  } else {
    y = box.minY;
  }
  // 设置初始态
  shape.transform([
    ['t', -x, -y],
    ['s', 1, 0.1],
    ['t', x, y]
  ]);
  // 设置动画目标态
  shape.animate({
    transform: [
      ['t', -x, -y],
      ['s', 1, 10],
      ['t', x, y]
    ],
    delay: i * 20
  }, 800, 'easeOutElastic');
}

Animate.interval.appear = function(){
  return barIn;
}

var data = [];
for (var i = 0; i < 50; i++) {
  data.push({
    x: i,
    y: (Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5
  });
}
var chart = new G2.Chart({
  id: 'c1',
  width: 800,
  height: 500
});
chart.axis('x', false);
chart.legend(false);
chart.source(data);
chart.interval()
     .position('x*y')
     .color('y', '#4a657a-#308e92-#b1cfa5-#f5d69f-#f5898b-#ef5055');
chart.render();